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

Less類似于jQuery

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

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

Koala編譯

國人開發的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
點擊文件展示功能選擇，選擇自動編譯，然后點擊執行編譯按鈕，如果成功會提示Success。

輸出方式的compress是壓縮后的代碼，我們開發、學習階段可以使用默認的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始終會執行finally塊里的代碼，好了，我們來看下Less班的finally如何寫：

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

發現了沒？就是一個“@_”參數！無論你選擇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中的嵌套是最有意思的小東西了、我們創建這個一個列表：

   

       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...