Less作為 CSS 的一種擴展叨橱，不僅完全兼容 CSS 語法，而且連新增的特性也是使用 CSS 語法断盛，你可以在任何時候回退到 CSS的寫法罗洗。 大家可以通過以下兩個地址，快速的學習Less郑临。
- Less文檔：http://less.bootcss.com/features/
- Less在線編譯工具：http://tool.oschina.net/less
變量
只能定義一次栖博，其本質(zhì)就是“常量”。
- 變量的定義：
@nice-blue: #5B83AD; @light-blue: @nice-blue + #111; @div-width: 13px;
- 變量的使用與編譯：
#header { color: @light-blue; width: @div-width; }
編譯為：
#header { color: #6c94be; width: 13px; }
混合（Mixin）
- 混合允許將一個屬性集合整塊替換到另一個屬性集合中厢洞。如：
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; }
我們可以將這個css屬性集合仇让，mixin到另一個css屬性集中，如：
#menu a { color: #111; .bordered;//或者寫為.bordered() } .post a { color: red; .bordered;//或者寫為.bordered() }
經(jīng)過編譯后：
#menu a { color: #111; border-top: dotted 1px black;//替換后 border-bottom: solid 2px black;//替換后 } .post a { color: red; border-top: dotted 1px black;//替換后 border-bottom: solid 2px black;//替換后 }
- 使mixin變量不作為css輸出
只需要添加一對圓括號就可以了躺翻，這是該mixin將不被輸出在編譯后的css文件中丧叽，如：
.my-mixin { color: black; } .my-other-mixin() { background: white; } .class { .my-mixin; .my-other-mixin; }
編譯后：
.my-mixin { color: black; } // 這里不編譯輸出.my-other-mixin .class { color: black; background: white; }
- 在mixin中使用選擇器selector
除了處理屬性外，mixin還可以使用css選擇器公你，如：
.my-hover-mixin() { &:hover { border: 1px solid red; } } button { .my-hover-mixin(); }
編譯后：
button:hover {// 定義的偽類選擇器hover被應用 border: 1px solid red; }
-
命名空間
想如果你想混合屬性在一個更復雜的選擇器,可以疊放多個id或類踊淳。如下：#outer { .inner { color: red; } } .c { #outer > .inner; }
那么，#outer和.c就作為一個命名空間了陕靠。對于#outer來說迂尝，.inner就作為它的一個屬性值，訪問的時候可以使用#outer.inner來訪問剪芥，以下這幾種寫法是等價的：
// all do the same thing
#outer > .inner;
#outer > .inner();
#outer.inner;
#outer.inner();
舉例：
#my-library {
.my-mixin() {
color: black;
}
}
// which can be used like this
.class {
#my-library > .my-mixin();
}
編譯為：
.class { color: black; }
- 關鍵字!important
在使用混合屬性后面加上!important關鍵字垄开，則混合中的所有屬性都會加上關鍵字!important。例如：
.foo (@bg: #f5f5f5, @color: #900) { background: @bg; color: @color; } .unimportant { .foo(1); } .important { .foo(2) !important; }
編譯后：
.unimportant { background: #f5f5f5; color: #900; } .important { background: #f5f5f5 !important; color: #900 !important; }
帶參數(shù)的Mixin
- mixin可以通過括號傳遞參數(shù)税肪，也可以帶默認參數(shù)：
.border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }
帶默認參數(shù)：
.border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }
`#header {
.border-radius;//與上圖的效果差不錯溉躲，默認為5px
}`
- mixin多參數(shù)：
mixin允許帶多個參數(shù)，也有類似于Java中函數(shù)重載的特性：
.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); }
編譯后：
.some .selector div { color-1: #008000; color-2: #008000; padding-2: 2; }
當我們定義相同混合屬性名益兄，參數(shù)不同锻梳，然后.mixin(#008000);調(diào)用，第一和第二混合都能匹配净捅，但是第三個缺少參數(shù)@padding的值疑枯，所以不會引用第三個混合屬性。
- 指定參數(shù)名傳值
`.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
.mixin(#efca44; @padding: 40px);
}`
編譯后：
.class1 { color: #33acfe; margin: 20px; padding: 20px; } .class2 { color: #efca44; margin: 10px; padding: 40px; }
關鍵字@arguments
@arguments有特殊的含義蛔六，類似于JavaScript中的arguments神汹，他包含了傳遞給混合屬性的所有參數(shù)庆捺，如下：
.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); }
編譯后：
.big-block { -webkit-box-shadow: 2px 5px 1px #000; -moz-box-shadow: 2px 5px 1px #000; box-shadow: 2px 5px 1px #000; }
關鍵字@reset
類似于ES6中的剩余參數(shù)...，如下：
.mixin(...) { // matches 0-N arguments .mixin() { // matches exactly 0 arguments .mixin(@a: 1) { // matches 0-1 arguments .mixin(@a: 1; ...) { // matches 0-N arguments .mixin(@a; ...) { // matches 1-N arguments
.mixin(@a; @rest...) { // @rest is bound to arguments after @a // @arguments is bound to all arguments }
- 模式匹配
有時候屁魏，你想讓你的mixin可以處理不同的情況滔以，有點類似于switch語句，如下：
.mixin(dark; @color) { color: darken(@color, 10%); } .mixin(light; @color) { color: lighten(@color, 10%); } .mixin(@_; @color) {//通配氓拼，這樣所有的情況都能擁有display:block這個屬性設置 display: block; } //使用該模式匹配 @switch: light; .class { .mixin(@switch; #888); }
編譯后：
.class { color: #a2a2a2; display: block; }
作為函數(shù)使用的Mixin
當我們把混合當做函數(shù)使用時你画，在調(diào)用函數(shù)之后，函數(shù)中的變量是可以使用的桃漾，除非調(diào)用混合屬性的元素自己也定義了同樣的變量坏匪。比如：
.mixin() { @width: 100%; @height: 200px; } .caller { .mixin(); width: @width; height: @height; }
編譯后：
.caller { width: 100%; height: 200px; }
作為表達式使用
.average(@x, @y) { @average: ((@x + @y) / 2); } div { .average(16px, 50px); // "call" the mixin padding: @average; // use its "return" value }
編譯后：
`div {
padding: 33px;
}`
import指令
具體可以參看文檔：http://less.bootcss.com/features/#import-directives-feature
Mixin Gurads
帶條件的mixin，使用關鍵字when來定義不同的條件撬统。具體可以參看文檔：http://less.bootcss.com/features/#mixin-guards-feature
CSS Guards
同理适滓，css也可以使用guards，它標志在選擇器之后恋追，也是使用關鍵字when凭迹，如下：
.my-optional-style() when (@my-option = true) { button { color: white; } } .my-optional-style(); //也可以直接在css樣式上寫guards button when (@my-option = true) { color: white; }
更多可以參看http://less.bootcss.com/features/#css-guards-feature
循環(huán)
在 Less 中，mixin 可以被自己調(diào)用苦囱。當這種遞歸形式的 mixin 與 Guard Expressions 和 Pattern Matching 一起聯(lián)合使用的話嗅绸，就可以創(chuàng)造出各種迭代/循環(huán)結構。如下就是一個用于生成 CSS 柵格類的遞歸循環(huán)的實例：
.generate-columns(4); .generate-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1)); }
編譯后：
.column-1 { width: 25%; } .column-2 { width: 50%; } .column-3 { width: 75%; } .column-4 { width: 100%; }
合并
merge 特性能夠聚合多個屬性從而形成一個用逗號分隔的單一屬性撕彤。merge 對于像 background 和 transform 這類屬性非常有用鱼鸠。為了避免意外的合并，merge 需要在每個需要合并的屬性名后面添加一個 + 以作標示羹铅。
.mixin() { box-shadow+: inset 0 0 10px #555; } .myclass { .mixin(); box-shadow+: 0 0 20px black; }
合并后：
.myclass { box-shadow: inset 0 0 10px #555, 0 0 20px black; }
父選擇符
&用于指代父選擇器以及當前規(guī)則的別名蚀狰，如下：
`a {
color: blue;
&:hover {
color: green;
}
}
//規(guī)則的別名
.button {
&-ok {
background-image: url("ok.png");
}
&-cancel {
background-image: url("cancel.png");
}
&-custom {
background-image: url("custom.png");
}
}`
編譯后：
a { color: blue; } a:hover { color: green; } //規(guī)則的別名，這里代表button .button-ok { background-image: url("ok.png"); } .button-cancel { background-image: url("cancel.png"); } .button-custom { background-image: url("custom.png"); }
- Multiple &
&可以出現(xiàn)多次职员，比如：
.link { & + & { color: red; } & & { color: green; } && { color: blue; } &, &ish { color: cyan; } }
編譯后：
.link + .link { color: red; } .link .link { color: green; } .link.link { color: blue; } .link, .linkish { color: cyan; }
更多關于&的請參考文檔：http://less.bootcss.com/features/#features-overview-feature-nested-rules
內(nèi)置函數(shù)
關于Less的內(nèi)置函數(shù)造锅，可以參看文檔http://less.bootcss.com/functions/#functions-overview
