1、巢狀規則
less使用巢狀規則來代替或者結合css的級聯樣式
<section
class
="section-nested"
>
<
h2 class
="h-nested"
>this is a nested head
h2>
<
article
class
="article-nested"
>
this is a nested article.
article
>
section
>
.section-nested
.section-nested .h-nested
.section-nested .article-nested
less中巢狀寫法如下，更加簡潔，並且能模仿出html中的結構。
.section-nested.article-nested
}
可以使用這種方法將偽選擇器繫結到混合類中，如下典型的clearfix
.clearfix}
&代表當前選擇器的父級。
2、巢狀指令和冒泡
指令media或者keyframe等可以使用選擇器一樣巢狀方式。指令放在上面，作用於同一規則集合中的其他元素的相關命令保持不變，這就是冒泡的含義。
.section-nested}}@media tv
}/**outputs**/@media screen
}@media screen and (min-width: 768px)
}@media tv
}
.mengpadding:2px;
}/**outputs**/.meng
@font-face
3、運算
// numbers are converted into the same units@conversion-1: 5cm + 10mm;// result is 6cm@conversion-2: 5 - 3cm - 5mm;// result is 1.5cm，第乙個5沒有單位，結果使用的是最左邊第一次出現的單位cm，5mm也被轉換為0.5cm來參與運算// conversion is impossible
@incompatible-units: 5 + 5px - 1mm;// result is 6.22047244px// example with variables
@base: 5%;@filler: @base * 2;// result is 10%@other: @base + @filler;// result is 15%
.conversion
/**outputs*/
.conversion
乘法和除法運算時不會轉換數字。多數情況下做乘除法時沒有意義的，乙個長度乘以另乙個長度，得到乙個面積，css不支援制定的面積樣式。
less會在數字上做運算，並把明確規定的單位賦值給結果。
@multiply: 1cm * 3mm; // result is 3cm.conversion/**outputs**/.conversion
顏色colors會被分割為紅，綠，藍，透明度四個維度。運算時在每乙個維度單獨進行計算。
例如，使用者對兩個顏色做加法運算，結果中的綠色維度等於輸入顏色的綠色維度資料之和。使用者用乙個數字乘以顏色資料，每乙個顏色維度的資料都得以與之相乘。
@color1: #224488 / 2; //results in #112244@color2: #112244 + #111; // result is #223355
@color3: #fff+#555;
.conversion/**outputs**/.conversion
4、escaping,轉義，允許你使用任意字元作為變數或屬性的值
5、function,函式
@basecolor: #f04615;@width: 0.5;
.conversion/**outputs**/.conversion
6、scope 變數範圍，變數和混合類首先在本地查詢，找不到時編譯器會在它的父級範圍內查詢。
@var: red;header
}/**outputs**/.header
header h1
變數和混合類不需要在它被使用之前定義，也可以在被引用之後定義，上面等價於
@var: red;header
@var: white;
}
這是一種懶載入的處理方式：變數是懶載入的，不需要在被引用之前定義。
乙個變數被定義多次時，從當前範圍中向上查詢，最後乙個定義的將被使用。
@var: red;header
@var:yellow;
}/**outputs**/header h1
Less學習筆記
less類似於jquery，是乙個庫。是一種動態樣式語言，屬於css預處理語言的一種，它使用類似css的語法，為css賦予了動態語言的特性，如變數 繼承 運算 函式等，更方便css的編寫和維護。1 混合變數例如 border 如果.div也想用這個樣式直接寫 複製 div 複製 2 變數沒帶值 bo...
Less學習筆記
less類似於jquery，是乙個庫。是一種動態樣式語言，屬於css預處理語言的一種，它使用類似css的語法，為css賦予了動態語言的特性，如變數 繼承 運算 函式等，更方便css的編寫和維護。1 混合變數例如 border 如果.div也想用這個樣式直接寫 複製 div 複製 2 變數沒帶值 bo...
學習筆記 Less
less is more than css 少即是多，比css 什麼是less？nodejs庫 瀏覽器端使用 koala的基本使用less的注釋 內容是被編譯的，保留進.css檔案中 內容不被編譯，不出現在.css檔案中 宣告變數，以 開頭，如 變數名 值 w 500px h 300px box不帶...