摘要：編譯工具編譯國人開發(fā)的編譯工具下載地址庫瀏覽器端使用的使用下載安裝后，打開設置，更換語言為簡體中文，然后重啟。

Less類似于jQuery

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

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

Koala編譯

國人開發(fā)的LESSSASS編譯工具

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

Node.js庫

瀏覽器端使用

下載安裝后，打開設置，更換語言為簡體中文，然后重啟。

新建Less項目目錄如下：

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

把Less目錄拖到Koala中，點擊右鍵設置輸出目錄：

輸出到style/main.css中：

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

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

輸出方式的compress是壓縮后的代碼，我們開發(fā)、學習階段可以使用默認的normal方式。

在HTML文件中引用css
打開index.html，link引用

測試
我們在main.less中寫less代碼，保存后就自動編譯到了main.css文件中。

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

也可以使用//我不會被編譯注釋。這個注釋在編譯時自動過濾掉

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

//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;}

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

? - 可設定默認值
? - 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;
}

帶參數的混合，Less：

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

.test_hunhe{
     .border_02(30px);
}

帶默認值參數的混合，Less：

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

在引用.border_03的時候沒有傳遞至，那么默認的值就是10px。

相當于JS中的if，但不完全是

滿足條件后才能匹配

我們來看一個畫三角的例子，如果你知道怎么畫更好：
HTML：

Less：

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

這是畫一個向上的三角，如果我們要改變三角的朝向，我們得改變border-color，我們得寫幾遍大部分都一樣的代碼，而用來模式匹配之后：
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;
}

然后我們需要什么方向調用的時候就傳什么方向：

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

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

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

發(fā)現(xiàn)了沒？就是一個“@_”參數！無論你選擇top是right方向，帶@_參數的triangle都會被帶上，調用的時候就沒必要再寫width，height等。

如果你覺得上面比較復雜了一點，OK，我們來一個簡單的例子，div定位的例子
HTML：

寫三個定位，相對定位、絕對定位和固定定位
Less：

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

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

這樣，這個div就是相對定位了。

在Less中，任何數組、顏色或者變量都可以參與運算，運算應該被包裹在括號中。例如：+ - * /
給寬度增加20px然后在乘以5個像素，Less：

@test_01:300px;

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

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

   

       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包含了所有傳遞進來的參數。如果你不想多帶帶處理每一個參數的話就可以像這樣寫：
Less：

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

這樣@arguments就自動幫我們注入了所有的參數，省了那么一丟丟的代碼。

避免編譯

有時候我們不需要輸出一些不正確的CSS語法或使用一些Less不認識的專有語法。

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

Less：

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

這樣的話，編譯后的CSS就自動幫你計算了
CSS：

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

但我們并不想它在編譯時被計算，而是想讓瀏覽器去計算，這時候我們就需要添加~符號了：

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

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

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

!important關鍵字
會為所有混合所帶來的樣式，添加!important

更多語法和文檔請訪問LESS中文網站：

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

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