學習筆記 Less

less is more ,than css-少即是多，比css

什麼是less？

nodejs庫

瀏覽器端使用

koala的基本使用less的注釋：

/* 內容是被編譯的，保留進.css檔案中 */

// 內容不被編譯，不出現在.css檔案中

//宣告變數，以@開頭，如：@變數名：值;

@w: 500px; 
@h: 300px;
.box

不帶引數(引用時可不帶()括號)：

宣告， .bd_radius{}；引用，.box

帶引數(引用時必須帶()括號)：

① 宣告，.bd_radius(@radius)

引用，.box——必須帶引數

預設帶值

.bd_radius(@radius:10px)

相容ie低版本（border-style: dashed）css三角

.********(top, @w:5px, @c:#ccc)
.********(bottom, @w:5px, @c:#ccc)
.********(left, @w:5px, @c:#ccc)
.********(right, @w:5px, @c:#ccc)

//@_ 變數，無論第乙個傳的引數是什麼，都會匹配這個方法

.********(@_, @w:5px, @c:#ccc)

引用：

.sanjiao

編譯後css：

.sanjiao

可以進行加減乘除運算，只要有乙個帶畫素的即可，符號兩邊需要空格

less中的運算

@test_01:300px;
.box_02

less巢狀：css中選擇器的另一種變形，通過css選擇器的相互巢狀完成到css層次選擇器的轉換。其中 & 代表它的上一層選擇器，適用場景，偽類。

巢狀越多，匹配次數越多，影響載入

& 代表上一層選擇器

.list a }
span 
}

終究還是變數，顧名思義，代表多個引數，適用場景，同乙個css樣式屬性對應多個屬性值，例如border:1px solid pink;如果屬性值以引數方式傳遞，就可以使用@arguments代替對應引數。如何引用？和以往一樣，傳參時要對應傳參，中間可以用",「或者」;"隔開，如果少傳，則按順序匹配。

@arguments 代表所有傳遞進來的引數

.border (@w:1px, @s: solid, @c: red)

引用：

.test_border

編譯後css：

.test_border

##避免編譯、!important以及總結

1 避免編譯

less類似於jquery，是乙個庫。是一種動態樣式語言，屬於css預處理語言的一種，它使用類似css的語法，為css賦予了動態語言的特性，如變數繼承運算函式等，更方便css的編寫和維護。1 混合變數例如 border 如果.div也想用這個樣式直接寫複製 div 複製 2 變數沒帶值 bo...

變數的延遲載入變數是塊級作用域平級什麼是混合？將一系列的規則集引入另乙個規則集中 ctrl c ctrl v 混合的定義在less規則有明確的指定，使用.的形式來定義普通混合編譯到原生css中的不帶輸出的混合加雙括號帶引數的混合帶預設值的混合匹配模式 arguments加減乘除計...