less是一種動(dòng)態(tài)樣式語(yǔ)言。作為CSS的一種擴(kuò)展兵睛，Less不僅完全兼容CSS語(yǔ)法肯骇，而且less將CSS賦予了動(dòng)態(tài)語(yǔ)言的特性，如變量祖很、繼承笛丙、運(yùn)算、函數(shù)假颇。less既可以在客戶端上運(yùn)行胚鸯，也可以借助Node.js或Rhino在服務(wù)端運(yùn)行。
網(wǎng)上有很多第三方工具幫助你編譯 Less 源碼拆融。筆者使用考拉編譯less文件蠢琳。

如果選擇考拉編譯啊终，你的html文件 link的是less文件同名的css文件镜豹，換言之考拉將為用戶編譯出一個(gè)css文件（與less文件同名）傲须。

注釋

less提供兩種注釋：/**/和//

兩者的區(qū)別是/**/會(huì)將注釋編譯到css文件中，而//不會(huì)趟脂。

變量

Less中的變量有以下規(guī)則：

以@作為變量的起始標(biāo)識(shí)泰讽，變量名由字母、數(shù)字昔期、_和-組成已卸；

沒(méi)有先定義后使用的規(guī)定；

定義時(shí) "@變量名: 變量值;" 的形式硼一；引用時(shí)采用 "@變量名" 或 "@{變量名}" 的形式.

f.box{
background-color: @color;
}
甚至可以用變量名定義為變量:  
@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;
解析后
content: "I am fnord."; 

混合

混合可以將一個(gè)定義好的class A輕松的引入到另一個(gè)class B中累澡，從而簡(jiǎn)單實(shí)現(xiàn)class B繼承class A中的所有屬性。我們還可以帶參數(shù)地調(diào)用般贼，就像使用函數(shù)一樣愧哟。

@testz_width:300px;
.box{
    width: @testz_width;
    height: @testz_width;
    background-color: yellow;

    .border;
}

.border{
    border: solid 5px pink;
}
輸出：
.box {
    width: 300px;
    height: 300px;
    background-color: yellow;
    border: solid 5px pink;
}

我們還可以帶參數(shù)地調(diào)用，就像使用函數(shù)一樣哼蛆。

混合帶參數(shù)
.border_02(@border_width){
    border: solid yellow @border_width;
}
.text_hunhe{
    .border_02(30px);
}
輸出：
.border {
     border: solid 5px pink;
}

我們還可以混合是默認(rèn)帶參蕊梧，當(dāng)不調(diào)用的class不傳參是，就會(huì)傳入默認(rèn)參數(shù)

混合－默認(rèn)帶值
.border_03(@border_width:40px){
    border: solid green @border_width;
}
.test_hunhe_03{
    .border_03();
}
輸出：
.test_hunhe_03 {
    border: solid #008000 40px;
}

匹配模式與引導(dǎo)

有些情況下腮介，我們想根據(jù)傳入的參數(shù)來(lái)改變混合的默認(rèn)呈現(xiàn)肥矢。我們就可以使用匹配模式。筆者將其理解為其他語(yǔ)言中的switch叠洗。以下是一個(gè)匹配模式的例子：

.triangle(top,@w:5px,@c:#ccc){
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: dashed dashed solid dashed;
 }
.triangle(bottom,@w:5px,@c:#ccc){
    border-width: @w;
    border-color: @c transparent transparent  transparent;
    border-style: solid dashed dashed  dashed;
 }  

.triangle(left,@w:5px,@c:#ccc){
    border-width: @w;
    border-color:  transparent @c transparent  transparent;
    border-style:  dashed solid dashed  dashed;
 }
 .triangle(right,@w:5px,@c:#ccc){
    border-width: @w;
    border-color: transparent transparent  transparent @c;
    border-style:  dashed dashed  dashed solid;
 }
 .triangle(@_,@w:5px,@c:#ccc){
    width: 0;
    height: 0;
    overflow: hidden;
 }  

定義好less后我們就可以進(jìn)行匹配：

html：
<div class="sanjiao"></div>
less：
.sanjiao{
    .triangle(right,100px);
}

結(jié)果輸出：

當(dāng)我們想根據(jù)表達(dá)式進(jìn)行匹配甘改，而非根據(jù)值和參數(shù)匹配時(shí)，導(dǎo)引就顯得非常有用灭抑。

.mixin (@a) when (lightness(@a) >= 50%) {
    background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
    background-color: white;
}
.mixin (@a) {
    color: @a;
}

lightness為less定義的函數(shù)楼誓，在后面會(huì)講，這里就不詳講了名挥，這個(gè)函數(shù)是用來(lái)返回HSL顏色模式的亮度（lightness）疟羹。返回值為0-100%的百分比數(shù)或 0-1 的整數(shù)。

我們運(yùn)行如下代碼：
class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
就會(huì)得到：
.class1 {
    background-color: black;
    color: #ddd;
}
.class2 {
    background-color: white;
    color: #555;
}

導(dǎo)引序列使用逗號(hào)‘,’—分割禀倔，當(dāng)且僅當(dāng)所有條件都符合時(shí)榄融，才會(huì)被視為匹配成功。導(dǎo)引中可用的全部比較運(yùn)算有： > >= = =< <救湖。

.m-mixin (@a) when (@a > 10), (@a < -10) { ... }
引導(dǎo)可以對(duì)參數(shù)進(jìn)行比較
.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }

運(yùn)算與避免編譯

任何數(shù)字愧杯、顏色或者變量都可以參與運(yùn)算. 來(lái)看一組例子:

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

如果像下面這樣單位運(yùn)算的話:

@var: 1px + 5;
less會(huì)輸出 6px.
括號(hào)也同樣允許使用:
width: (@var + 5) * 2;

那么如果我們不希望less將行運(yùn)算，而是講表達(dá)式輸出呢鞋既？

例如css3中新增的屬性calc()力九，其最大的好處就是用在流體布局上耍铜，瀏覽器可以通過(guò)calc()計(jì)算得到元素的寬度。
less中也考慮到了這點(diǎn)跌前，我們可以使用～“表達(dá)式”來(lái)避免編譯棕兼，這樣就可原樣輸出表達(dá)式

.test_03{
width:~"calc(300px-30px)";
}
輸出：
.test_03{
width:calc(300px-30px);
}

嵌套

ESS 可以讓我們以嵌套的方式編寫層疊樣式. 讓我們先看下下面這段 CSS:

#header { color: black; }
#header .navigation {
    font-size: 12px;
}
#header .logo { 
    width: 300px; 
}
#header .logo:hover {
    text-decoration: none;
}
在 less 中, 我們就可以這樣寫:
#header {
    color: black;

    .navigation {
        font-size: 12px;
    }
    .logo {
         width: 300px;
        &:hover { text-decoration: none }
    }
}   

注意 & 符號(hào)的使用—如果你想寫串聯(lián)選擇器，而不是寫后代選擇器抵乓，就可以用到&了. 這點(diǎn)對(duì)偽類尤其有用如 :hover 和 :focus.

arguments與!important

@arguments包含了所有傳遞進(jìn)來(lái)的參數(shù). 如果你不想單獨(dú)處理每一個(gè)參數(shù)的話就可以像這樣寫:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000)    {
     box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments; 
}
.box-shadow(2px, 5px);
將會(huì)輸出:
box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
-webkit-box-shadow: 2px 5px 1px #000;

!important的使用會(huì)使優(yōu)先級(jí)最高伴挚，建議在調(diào)試樣式時(shí)使用

.border_03(@border_width:40px){
    border: solid green @border_width;
 }
 輸出：
 .test_important {
    border: solid #008000 10px !important;
}

函數(shù)

less中提供了非常多的函數(shù)，筆者就不一一介紹了灾炭，在這里介紹幾個(gè)函數(shù)茎芋。

extract返回指定元素

@color-list: pink, yellow, red, #cccccc;
.wrap-01{
    color: extract(@color-list, 3);
}
輸出： color:red;

• 數(shù)學(xué)函數(shù)

ceil

向上取整。
參數(shù)： number - 浮點(diǎn)數(shù)蜈出。
返回值： 整數(shù)（integer）
案例： ceil(4.4)
輸出： 4

floor

向下取整田弥。
參數(shù)： number - 浮點(diǎn)數(shù)
返回值： 整數(shù)（integer）
案例： floor(2.6)
輸出： 2

percentage

將浮點(diǎn)數(shù)轉(zhuǎn)換為百分比字符串。
參數(shù)： number - 浮點(diǎn)數(shù)铡原。
返回值： 字符串（string）
案例： percentage(0.32)
輸出：32%

round

四舍五入取整偷厦。
參數(shù)：number: 浮點(diǎn)數(shù)
decimalPlaces: 可選：四舍五入取整的小數(shù)點(diǎn)位置。默認(rèn)值為0眷蜈。
返回值： 數(shù)字（number）
案例： round(1.32)
輸出： 2

以及如下函數(shù)：

sqrt:平方根函數(shù) （保留單位）
abs:取絕對(duì)值 （保留單位）
三角函數(shù)（返回?cái)?shù)值)
反三角函數(shù)（返回以弧度為單位的角度)
pi:返回圓周率 π  
pow(a沪哺，b):返回a的b次方 
mod（a，b:返回第一個(gè)參數(shù)對(duì)第二參數(shù)取余的結(jié)果
min:返回最小的值 
max:返回最大的值

• 顏色函數(shù)

les中定義了非常多的顏色函數(shù)酌儒。如rgb rgba argb hsl等等辜妓，下面介紹簡(jiǎn)單函數(shù)，其他的顏色函數(shù)大家可以去查閱相關(guān)資料了解忌怎。

hsl

通過(guò)色相 (hue)籍滴，飽和度 (saturation)，亮度(lightness) 三種值 (HSL) 創(chuàng)建不透明的顏色對(duì)象榴啸。

hue: 0-360 的整數(shù)孽惰，用于表示度數(shù)。
saturation: 0-100% 的百分比數(shù)或 0-1 的整數(shù)鸥印。
lightness: 0-100% 的百分比數(shù)或 0-1 的整數(shù)勋功。
返回值： color
案例： hsl(90, 100%, 50%)
輸出： #80ff00
當(dāng)你想基于一種顏色的通道來(lái)創(chuàng)建另一種顏色時(shí)很方便，
例如： @new: hsl(hue(@old), 45%, 90%);
@new 將擁有 @old 的 hue库说，以及它自身的飽和度與亮度狂鞋。

• 類型函數(shù)

驗(yàn)證待驗(yàn)證的值是否為某一類型 例如：isnumber()、isstring()潜的、iscolor()骚揍、iskeyword()、isurl() 等等啰挪。下面簡(jiǎn)單介紹isnumber()函數(shù)

如果待驗(yàn)證的值為數(shù)字則返回 true 信不，否則返回 false 嘲叔。
參數(shù)：value - 待驗(yàn)證的值或變量。
返回值：如果待驗(yàn)證的值為數(shù)字則返回 true 抽活，否則返回 false 硫戈。
案例：
    isnumber(#ff0);     // false
    isnumber(blue);     // false
    isnumber("string"); // false
    isnumber(123 4);     // true
    isnumber(56px);     // true
    isnumber(7.8%);     // true