最近在研究Less，分享一些Less的知識與栗子，參考資料是Less官網，因爲基本是全英文，所以看不慣英文的童鞋可以參考這篇文章，希望能有幫助。
LESS變量：
- 變量聲明（最基礎的應用—用於css樣式）：
- 使用“@”前綴標記變量；
- @link-color: #428bca; // sea blue
- Less變量用於選擇器、URL、屬性：
- // Variables@my-selector: banner;// Usage.@{my-selector} { //用花括號將變量名括起來font-weight: bold;line-height: 40px;margin: 0 auto;}
- Less變量甚至可以用於變量名：
- @primary: green;@secondary: blue;.section {@color: primary;.element {color: @@color;}}
- 懶加載：
- 變量的使用可以在定義之前（不建議）
- 若一個變量定義多次，則以當前作用域最近的一次爲準（和css樣式作用域類似），若當前作用域不存在該變量，則往上層作用域查找，直到找到該變量或查找至根作用域爲止
父選擇器：
- &代表父選擇器
- 定義僞類樣式：
- a {color: blue;&:hover {color: green;}}
- 定義重複性的類的樣式：
- .button {&-ok {background-image: url("ok.png");}&-cancel {background-image: url("cancel.png");}}
- Output:.button-ok {background-image: url("ok.png");}.button-cancel {background-image: url("cancel.png");}
- 組合式&：
- & > &
- & &
- &&
- &,&-ish
- 注意，如果多層嵌套，則&不僅代表其最近的父選擇器，而是代表其所有的祖先選擇器。如：.grand {.parent {& > & { color: red; }}}output：.grand .parent > .grand .parent {color: red;}
- 改變選擇器順序（在孫子的位置做老子的事）：
- .header {.menu {border-radius: 5px;.no-borderradius & {background-image:url('images/button-background.png');}}}output：.header .menu {border-radius: 5px;}.no-borderradius .header .menu {background-image:url('images/button-background.png');}
繼承：
- &:extend();其思想與面向對象中的繼承相同，子選擇器可以重寫父選擇器中的樣式
- 從本質上講，extend繼承關注的是編譯後的css，而非源less。所以在分析less時應採取css的思考方式而非less
- nav ul {&:extend(.inline); //&代表的父選擇器繼承了（）內的選擇器的樣式。background: blue;}.inline { color: red; }Output:nav ul {background: blue;}.inline, nav ul { color: red; }
- 也可直接寫成：.a:extend(.b) {}和.a { &:extend(.b); }一樣的效果
- c:extend(.d all) { // 加上all關鍵字即即成所有".d”， e.g. 包括".x.d" ，".d.x”，”*.d”,”.d:hover”等等}
- .c:extend(.d) { // 不加all關鍵字則僅繼承css輸出爲".d”的選擇器}
- 可繼承多個選擇器，用“，”分隔開：.e:extend(.f, .g) {}
- 繼承的寫法與僞類相同，但注意:entend()只能寫在最後，如：pre:hover:extend(div pre)
- 若採用繼承的內部寫法：&:extend()，那麼其外部的所有選擇器都將作爲繼承者，如：pre:hover, .some-class { &:extend(div pre); }output：pre:hover:extend(div pre), .some-class:extend(div pre) {}
- extend的精確匹配：
- :extend(.class)只匹配”.class”選擇器，其它選擇器如”.a.class”,”.class.a”,”.class > .a”，包括”*.class”等等統統不匹配，不繼承;
- 選擇器後的僞類順序也要一致才能匹配，順序不一致雖然效果相同，但extend無法匹配，如：link:hover:visited { color: blue; } .selector:extend(link:visited:hover) {}匹配不到，不繼承
- 屬性選擇器的寫法不影響繼承的精確匹配，對屬性比較寬容
- extend不能匹配帶有變量的選擇器，如：@variable: .bucket; @{variable} { // 插值選擇器color: blue;}
- extend在@media中的作用域：僅識別匹配並繼承當前@media內的選擇器，外部、內部或兄弟@media內的全都不匹配
- 爲什麼有了mixin還需要extend呢？二者的不同之處在於編譯完成後的css寫法不同，extend產生的css更爲簡潔，相對而言mixin會產生大量重複，extend更有利於縮減css的大小。如：使用mixin：.my-inline-block() {display: inline-block;font-size: 0; }.thing1 { .my-inline-block; } .thing2 { .my-inline-block; }Output：.thing1 {display: inline-block;font-size: 0;}.thing2 {display: inline-block;font-size: 0;}使用extend：.my-inline-block {display: inline-block;font-size: 0;}.thing1 {&:extend(.my-inline-block); }.thing2 { &:extend(.my-inline-block); }output：.my-inline-block, .thing1, .thing2 { display: inline-block; font-size: 0; }另外，extend可以看作是mixin的一種更高級的替代方式，原因是mixin只能被用於簡單的選擇器，而例如這類情況：有兩個html代碼塊，你想在這兩個代碼塊中使用相同的樣式，此時就可以使用extend將他們聯繫起來。
混合：
- 你可以將類選擇器或id選擇器（不妨先稱爲a）直接混合進另一個選擇器（b），這樣b選擇器就會擁有a選擇器中所有的屬性設置（非常簡單粗暴）
- 舉個栗子：.a, #b { color: red; }.mixin-class { .a(); }.mixin-id { #b(); }Output:.a, #b { color: red; }.mixin-class { color: red; }.mixin-id { color: red; }其中調用mixin時的小括號“()”可以省略：.a();與.a;一樣
- 不輸出mixin：從上個例子我們會發現一個問題，我們聲明（“聲明”一詞用在這裏並不正確，但我相信是比較能讓人容易理解的表述）的用於mixin的選擇器a和b在css輸出中也被解析出來了。但是實際上大多數情況下我們使用mixin時是不需要他們被解析成css輸出出來的，解決方法非常簡單，在聲明它們的時候加個括號“（）”就可以了，舉個栗子：.my-mixin { color: black; }.my-other-mixin() { background: white; }.class { .my-mixin; .my-other-mixin; }output：.my-mixin { color: black; }.class { color: black; background: white; }
- mixin不但可以包含屬性，還可以包含選擇器。舉個栗子：.my-hover-mixin() {&:hover { border: 1px solid red; }}button { .my-hover-mixin(); }outputs：button:hover { border: 1px solid red; }
- 命名空間：當mixin選擇器定義多了，難免會遇到名字衝突的情況，此時我們可以採用“封裝”的思想，將選擇器按照一定規則封裝進另外的id選擇器裏，爲什麼選擇id選擇器呢，自然是爲了確保唯一性了，舉個栗子：可以這麼“封裝”：#my-library {.my-mixin() { color: black; }}// 可以這麼使用：.class { #my-library > .my-mixin(); }以下幾種寫法是完全相同的：#outer > .inner;#outer > .inner();#outer .inner;#outer .inner();#outer.inner;#outer.inner();
- !important關鍵字：在mixin的調用後面加上該關鍵字會使被調用的mixin選擇器中的所有屬性在此處都變成!important，舉個栗子.foo (@bg: #f5f5f5, @color: #900) {background: @bg;color: @color;}.unimportant { .foo(); }.important { .foo() !important; }outputs：.unimportant {background: #f5f5f5;color: #900;}.important {background: #f5f5f5 !important;color: #900 !important;}
- 你可以給mixin加參數（更像是一個編程語言了，真的舒服），還可以加默認值。舉個栗子：.border-radius(@radius: 5px) {-webkit-border-radius: @radius;-moz-border-radius: @radius;border-radius: @radius;}#header { .border-radius(4px); }.button { .border-radius(6px); }.box { .border-radius; } //這裏默認參數爲5px
- 多個參數的mixin：
- 參數可以用逗號或分號分隔開，但是建議用分號，因爲逗號在此處會產生雙重含義：1、mixin參數分隔符2、css列表分隔符所以如果使用逗號那麼就不可能兩者兼顧，而使用分號的話編譯器就會將分號視爲參數分隔符同時將逗號視爲css列表分隔符
- 似乎不是很清晰，栗子會告訴你怎麼回事：1、.name(1, 2, 3; something, else)：兩個參數，每個參數都包含一個逗號分隔的列表2、.name(1, 2, 3)：三個參數，每個參數是一個數字3、.name(1, 2, 3;)：一個參數，這個參數是一個用逗號分隔的css列表4、.name(@param1: red, blue;)：用逗號分隔的參數默認值
- less允許定義多個相同名字的mixin，甚至允許它們擁有不同的參數個數，這種情況less會將所有它能用的屬性全用上，直接上栗子：.mixin(@color) { color-1: @color; }.mixin(@color; @padding: 2) {color-2: @color;padding-2: @padding;}.mixin(@color; @padding; @margin: 2) {color-3: @color;padding-3: @padding;margin: @margin @margin @margin @margin;}.some .selector div { .mixin(#008000); }outputs：.some .selector div {color-1: #008000;color-2: #008000;padding-2: 2;}
- @arguments變量在mixin被調用時，@arguments變量包含着其所有變量。當我們不需要處理特定變量時很有用，請看栗子：.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {-webkit-box-shadow: @arguments;-moz-box-shadow: @arguments;box-shadow: @arguments;}.big-block { .box-shadow(2px; 5px); }outputs：.big-block {-webkit-box-shadow: 2px 5px 1px #000;-moz-box-shadow: 2px 5px 1px #000;box-shadow: 2px 5px 1px #000;}
- 高級參數與@rest變量：我們可以用“…“來獲取mixin的多個參數。舉個栗子：.mixin(...) { // 匹配 0-N 個參數.mixin() { // 匹配 0 個參數.mixin(@a: 1) { // 匹配 0-1 個參數.mixin(@a: 1; ...) { // 匹配 0-N 個參數.mixin(@a; ...) { // 匹配 1-N 個參數.mixin(@a; @rest...) {// @rest 綁定@a之後的參數// @arguments 綁定所有的參數}