摘要：編譯工具編譯國(guó)人開(kāi)發(fā)的編譯工具下載地址庫(kù)瀏覽器端使用的使用下載安裝后，打開(kāi)設(shè)置，更換語(yǔ)言為簡(jiǎn)體中文，然后重啟。

Less類(lèi)似于jQuery

LESCSS使用這個(gè)動(dòng)態(tài)樣式語(yǔ)言，屬于CSS預(yù)處理語(yǔ)言的一種，它使用類(lèi)似CSS的語(yǔ)法，為CSS賦予了動(dòng)態(tài)語(yǔ)言的特性，如變量、繼承、運(yùn)算、函數(shù)等，更方便CSS的編寫(xiě)和維護(hù)。

LESSCSS可以在多種語(yǔ)言、環(huán)境中使用，包括瀏覽器端、桌面客戶(hù)端、服務(wù)端。

Koala編譯

國(guó)人開(kāi)發(fā)的LESSSASS編譯工具

下載地址：http://koala-app.com/index-zh.html

Node.js庫(kù)

瀏覽器端使用

下載安裝后，打開(kāi)設(shè)置，更換語(yǔ)言為簡(jiǎn)體中文，然后重啟。

新建Less項(xiàng)目目錄如下：

在style文件夾下新建main.less文件，推薦使用用Sublime Text，打開(kāi)main.less

把Less目錄拖到Koala中，點(diǎn)擊右鍵設(shè)置輸出目錄：

輸出到style/main.css中：

實(shí)際上是通Koala把main.less編譯成css然后寫(xiě)入到mian.css文件中。

編譯less
點(diǎn)擊文件展示功能選擇，選擇自動(dòng)編譯，然后點(diǎn)擊執(zhí)行編譯按鈕，如果成功會(huì)提示Success。

輸出方式的compress是壓縮后的代碼，我們開(kāi)發(fā)、學(xué)習(xí)階段可以使用默認(rèn)的normal方式。

在HTML文件中引用css
打開(kāi)index.html，link引用

測(cè)試
我們?cè)趍ain.less中寫(xiě)less代碼，保存后就自動(dòng)編譯到了main.css文件中。

可以使用CSS中的注釋 （/*我會(huì)被編譯*/）

也可以使用//我不會(huì)被編譯注釋。這個(gè)注釋在編譯時(shí)自動(dòng)過(guò)濾掉

Less中聲明變量一定要用@開(kāi)頭，比如：@變量名:值

//1.聲明變量
@test_width:300px;
.box{
   //2.使用變量
   width: @test_width;
   height: @test_width;
   border: 1px solid white;
   background-color: yellow;
}

它編譯后的css文件中@test_width就直接替換為300px;了。

混合（mixin）變量
?- 例如：.border{border:solid 10px red;}

帶參數(shù)的混合
?- .border-radius(@radius){css代碼}

? - 可設(shè)定默認(rèn)值
? - border-radius(@radius:5px){css代碼}

Less：

@test_width:300px;
.box{
     //2.使用變量
     width: @test_width;
     height: @test_width;
     background-color: yellow;

     .border;
}

//混合
.border{
 border: 5px solid pink;
}

.box2{
     .box;
     margin-left: 100px;
}

生成后的CSS：

.box {
     width: 300px;
?    height: 300px;
?    background-color: yellow;
?    border: 5px solid pink;
}
.border {
?   border: 5px solid pink;
}
.box2 {
?   width: 300px;
?   height: 300px;
?   background-color: yellow;
?   border: 5px solid pink;
?   margin-left: 100px;
}

帶參數(shù)的混合，Less：

//混合 - 可帶參數(shù)的
.border_02(@border_width){
     border: solid yellow @border_width;
}

.test_hunhe{
     .border_02(30px);
}

帶默認(rèn)值參數(shù)的混合，Less：

.border_03(@border_width:10px){
     border: solid green @border_width;
}
.text_hunhe_03{
     .border_03();
}

在引用.border_03的時(shí)候沒(méi)有傳遞至，那么默認(rèn)的值就是10px。

相當(dāng)于JS中的if，但不完全是

滿(mǎn)足條件后才能匹配

我們來(lái)看一個(gè)畫(huà)三角的例子，如果你知道怎么畫(huà)更好：
HTML：

Less：

.sanjiao{
     width: 0;
     height: 0;
     overflow: hidden;
     border-width: 10px;
     border-color: transparent transparent red transparent;
     border-style: dashed dashed solid dashed;
}

這是畫(huà)一個(gè)向上的三角，如果我們要改變?nèi)堑某颍覀兊酶淖僢order-color，我們得寫(xiě)幾遍大部分都一樣的代碼，而用來(lái)模式匹配之后：
Less：

//模式匹配
.triangle(top,@width:5px,@color:#ccc){
     border-width: @width;
     border-color: transparent transparent @color transparent;
     border-style: dashed dashed solid dashed;
}
.triangle(bottom,@width:5px,@color:#ccc){
     border-width: @width;
     border-color: @color transparent transparent transparent;
     border-style: dashed dashed solid dashed;
}
.triangle(left,@width:5px,@color:#ccc){
     border-width: @width;
     border-color: transparent @color transparent transparent;
     border-style: dashed solid dashed dashed;
}
.triangle(right,@width:5px,@color:#ccc){
     border-width: @width;
     border-color: transparent transparent transparent @color;
     border-style: dashed dashed dashed solid;
}

然后我們需要什么方向調(diào)用的時(shí)候就傳什么方向：

.sanjiao{
     width: 0;
     height: 0;
     overflow: hidden;
     .triangle(right,100px);
}

但是，里面的width、heiht又要重寫(xiě)一遍，而Less給我們提供了一個(gè)東西，它不管你如何選擇什么三角方向，它總會(huì)帶上那個(gè)東西，有點(diǎn)像Java里面的finally塊，無(wú)論你try塊里做了什么，Java始終會(huì)執(zhí)行finally塊里的代碼，好了，我們來(lái)看下Less班的finally如何寫(xiě)：

.triangle(@_,@width:5px,@color:#ccc){
     width: 0;
     height: 0;
     overflow: hidden;
}
.sanjiao{
     .triangle(right,100px);
}

發(fā)現(xiàn)了沒(méi)？就是一個(gè)“@_”參數(shù)！無(wú)論你選擇top是right方向，帶@_參數(shù)的triangle都會(huì)被帶上，調(diào)用的時(shí)候就沒(méi)必要再寫(xiě)width，height等。

如果你覺(jué)得上面比較復(fù)雜了一點(diǎn)，OK，我們來(lái)一個(gè)簡(jiǎn)單的例子，div定位的例子
HTML：

寫(xiě)三個(gè)定位，相對(duì)定位、絕對(duì)定位和固定定位
Less：

//匹配模式 - 定位
.post(r){
     position: relative;
}
.post(a){
     position: absolute;
}
.post(f){
     position: fixed;
}

.pipei{
     width: 200px;
     height: 200px;
     background-color: green;
     .post(r);
}

這樣，這個(gè)div就是相對(duì)定位了。

在Less中，任何數(shù)組、顏色或者變量都可以參與運(yùn)算，運(yùn)算應(yīng)該被包裹在括號(hào)中。例如：+ - * /
給寬度增加20px然后在乘以5個(gè)像素，Less：

@test_01:300px;

.box_02{
 width: (@test_01 + 20) * 5;
}

Less中的嵌套是最有意思的小東西了、我們創(chuàng)建這個(gè)一個(gè)列表：

   

       Less的嵌套用法
       Less的嵌套用法
       Less的嵌套用法
       Less的嵌套用法
       Less的嵌套用法
   
 

Less：

.list{
   width: 600px;
   margin: 30px auto;
   padding: 0;
   list-style: none;
 
   li{
       height: 30px;
       line-height: 30px;
       background-color: pink;
       margin-bottom: 5px;
       padding: 0 10px;
   }
   a{
       float: left;
       //& 代表它的上一層選擇器
       &:hover{
             color: red;
       }
   }
   span{
         float: right;
   }
}

它編譯后生成的CSS就是這樣的：

.list {
?   width: 600px;
?   margin: 30px auto;
?   padding: 0;
?   list-style: none;
}
.list li {
?   height: 30px;
?   line-height: 30px;
?   background-color: pink;
?   margin-bottom: 5px;
?   padding: 0 10px;
}
.list a {
?   float: left;
}
.list a:hover {
?   color: red;
}
.list span {
?   float: right;
}

@arguments包含了所有傳遞進(jìn)來(lái)的參數(shù)。如果你不想多帶帶處理每一個(gè)參數(shù)的話(huà)就可以像這樣寫(xiě)：
Less：

.border_arg(@w:30px,@c:red,@xx:solid){
   border: @arguments;
}
.test_arguments{
   .border_arg();
}

這樣@arguments就自動(dòng)幫我們注入了所有的參數(shù)，省了那么一丟丟的代碼。

避免編譯

有時(shí)候我們不需要輸出一些不正確的CSS語(yǔ)法或使用一些Less不認(rèn)識(shí)的專(zhuān)有語(yǔ)法。

要輸出這樣的值，我們可以在字符串前加一個(gè)~，例如：width:~"clac(100% - 35)"

Less：

.test_03 {
?   width: calc(200px - 30px);
}

這樣的話(huà)，編譯后的CSS就自動(dòng)幫你計(jì)算了
CSS：

.test_03 {
?   width: calc(170px);
}

但我們并不想它在編譯時(shí)被計(jì)算，而是想讓瀏覽器去計(jì)算，這時(shí)候我們就需要添加~符號(hào)了：

.test_03{
     width: ~"calc(200px - 30px)";
}

這樣，就可以避免編譯，輸出的CSS就是這樣（原樣輸出）

.test_03 {
?     width: calc(200px - 30px);
}

!important關(guān)鍵字
會(huì)為所有混合所帶來(lái)的樣式，添加!important

更多語(yǔ)法和文檔請(qǐng)?jiān)L問(wèn)LESS中文網(wǎng)站：

http://www.bootcss.com/p/lesscss/

http://www.1024i.com/demo/less/index.htm...