引文

Less是一種動態的樣式語言。Less擴充套件了CSS的動態行為，比如說，設定變數（Variables）、混合書寫模式（Mixins）、操作 （Operations）和功能（Functions）等等，最棒的是，Less使用了現有的CSS語法，也就是說，你可以直接把你現成的樣式檔案 “style.css”直接改成“style.less”，他也能正常工作。如下。

<link rel="stylesheet/less" href="less/style.less" />

Less現在可以在客戶端（如：IE+,Webkit,Firefox）和伺服器（如node.js）上執行。前面也說過Less是CSS的一種擴 展，他不但向後相容，而且在現有的CSS語法基礎上增加許多額外的功能。如果你具有一定的CSS語法基礎，學習Less將是一件輕而易舉的事情，那麼我們 現在就開始吧，首先一起看一段用Less語法的CSS程式碼。

               .box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
                  @val: @x @y @blur rgba(0, 0, 0, @alpha);
                  box-shadow:         @val;
                  -webkit-box-shadow: @val;
                  -moz-box-shadow:    @val;
                }


               .box { @base: #f938ab;
                  color:        saturate(@base, 5%);
                  border-color: lighten(@base, 30%);
                  div { .box-shadow(0, 0, 5px, 0.4) }
                }

看到這裡或許你現在並不知道這些程式碼表示的是什麼意思？不過不要緊張，我們會一步一步一介紹這些語法表示的是什麼意思。別的先不說，我們一起動起來吧。

如何使用Less

要成功使用Less，需要一個指令碼的支援，這個指令碼我們把他叫做less.js。大家可以【點選這裡】下載這個less指令碼,並放到你的專案中。下載好以後我們需要把less.js引用到檔案中，引用方式很簡單。

<link rel="stylesheet/less" type="text/css" href="less/styles.less">
<script src="js/less.js" type="text/javascript"></script>

Less包含哪些

變數

Less中的變數充許你在樣式中的某個地方對常用的值進行定義，然後應用到樣式中，這樣只要改變你定義的變數引數值就可以達到改變全域性的效果，我們先來看一段程式碼。

Less程式碼：

　　　　　　　/*======== 定義變數===========*/
                @color: #4d926f;
            /*======== 應用到元素中 ========*/
                #header {
                    color: @color;
                }
                h2 {
                    color: @color;
                }

Less編譯後：

　　　　　　　/*======= Less 編譯成 css ======*/
                #header {
                    color: #4d926f;
                }
                h2 {
                    color: #4d926f;
                }

Less中的變數還具有計算功能，如下。

Less程式碼：

　　　　　　　　　@nice-blue: #5b83ad;
                @light-blue: @nice-blue + #111;
                #header {
                    color: @light-blue;
                }

編譯後：

#header {color: #6c94be;}

我們還可以定義一個變數名為變數，如下。

Less：

　　　　　　　　　 @color: #253636;
                @highlight: "color";
                #header {color: @@highlight;}

編譯後：

#header {color: #253636;}

注：在Less中的變數實際上就是一個“常量”，因為它們只能被定義一次。

混合類—Mixin（類似於函式）

混入其實就是一種巢狀，它充許你將一個類嵌入到另一個類中，而被嵌入的這個類也稱為是一個變數。換句話說，你可以用一個類定義CSS，然後把整個為當作一個變數來使用，嵌入到另一個類中當作他的屬性；另外混入也像一個帶有引數的functions。

混入(Mixin)有一個名詞叫“混入引數（Parametric Mixins）”，上面也說過。Less具有一個特殊型別的規則集，那就是一個類可以當作另一個元素的屬生值，並且還可以接受其自己的引數，我們來看一個典型的例項。

Less：

　　　　　　　　　/*========== 定義一個規則，並且不設定預設引數值 ============*/
                .borderRadius(@radius){
                    -moz-border-radius: @radius;
                    -webkit-border-radius: @radius;
                    border-radius: @radius;
                }
                /*============ 應用到元素中 ============*/
                #header {
                    .borderRadius(10px); /*把10px傳給變數@radius*/
                }
                .btn {
                    .borderRadius(3px);/*把3px傳給變數@radius*/
                }

編譯後：

　　　　　　　　　#header {
                    -moz-border-radius: 10px;
                    -webkit-border-radius: 10px;
                    border-radius: 10px;
                }
                
                .btn {
                    -moz-border-radius: 3px;
                    -webkit-border-radius: 3px;
                    border-radius: 3px;
                }

我們還可以給Mixins的引數定義一人預設值，如。

Less：

　　　　　　　　　.borderRadius(@radius:5px){
                    -moz-border-radius: @radius;
                    -webkit-border-radius: @radius;
                    border-radius: @radius;
                }
                
                .btn {
                    .borderRadius;
                }

編譯後：

　　　　　　　　　.btn {
                    -moz-border-radius: 5px;
                    -webkit-border-radius: 5px;
                    border-radius: 5px;
                }

還有一種方法就是給Mixins不定任何引數，特別是在你想隱藏輸出的CSS規則，但又想在別的規則中包含他的屬性，使用這種不帶引數的Mixins將非常有用的，我們來看一段程式碼。

Less：

　　　　　　　　　.wrap(){
                    text-wrap: wrap;
                    white-space: pre-wrap;
                    white-space: -moz-pre-wrap;
                    word-wrap: break-word;
                }
                pre {
                    .wrap;
                }

編譯後：

　　　　　　　　　pre {
                    text-wrap: wrap;
                    white-space: pre-wrap;
                    white-space: -moz-pre-wrap;
                    word-wrap: break-word;
                }

Mixins還有一個重要的變數：@arguments。@arguments在Mixins中具是一個很特別的引數，當Mixins引用這個引數時，他將表示所有的變數，當你不想處理個別的引數時，這個將很有用，我們來看一個陰影的例項。

Less：

                .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
                    -moz-box-shadow: @arguments;
                    -webkit-box-shadow: @arguments;
                    box-shadow: @arguments;
                }
                
                #header {
                    .boxShadow(2px,2px,3px,#f36);
                }

編譯後：

                #header {
                    -moz-box-shadow: 2px 2px 3px #FF36;
                    -webkit-box-shadow: 2px 2px 3px #FF36;
                    box-shadow: 2px 2px 3px #FF36;
                }

巢狀

巢狀規則主要是針對一多層元素的樣式規則寫法，以前我們在多層元素中寫樣式，要麼從頭選下來，要麼另外給這個元素加上類名或id名，但在Less中我們不需要這樣操作了，我們只要使用他的巢狀規則就可以完成，我們來看一個簡單的例項。

                <div id="header">
                    <h1><a href="">W3cplus</a></h1>
                    <p>記述前端那些事——引領Web前沿</p>
                </div>

Less：

                #header {
                    display: inline;
                    float: left;
                    h1 {
                        font-size: 26px;
                        font-weight: bold;
                        a {
                            text-decoration: none;
                            color: #f36;
                            &:hover {
                                text-decoration: underline;
                                color: #63f;
                            }
                        }
                    }
                    p {
                        font-size: 12px;
                    }
                }

編譯後：

                #header {
                    display: inline;
                    float: left;
                }
                #header h1 {
                    font-size: 26px;
                    font-weight: bold;
                }
                #header h1 a {
                    color: #FF3366;
                    text-decoration: none;
                }
                #header h1 a:hover {
                    color: #6633FF;
                    text-decoration: underline;
                }
                #header p {
                    font-size: 12px;
                }

使用Less的巢狀規則讓你的CSS程式碼更簡潔，因為他的寫法就是模仿HTML的DOM結構來寫的。

大家注意了，這裡的"&"很重要，在Less中巢狀書寫中有沒有&區別是完全不一樣的效果，有 "&" 時解析的是同一個元素或此元素的偽類，沒有 & 解析是後代元素。

運算（Operation）

Operations（直譯“動作”）他可以讓你對元素的屬性值，顏色進行四則運算：加、減、乘、除。

Less：

                @base: 5%;
                @filler: @base*2;
                @other: @base + @filler;
                #header {
                    color: #888 / 4;
                    height: 100% / 2 + @filler; 
                }

編譯後：

                #header {
                    color: #222222;
                    height: 60%;
                }

函式（Function）

1、Color函式

Less中還提供了一個Color Functions，他具有多種變換顏色的功能，先把顏色轉換成HSL色，然後在此基礎上進行操作，具體包括以下幾種。

                    lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
                    darken(@color, 10%);      // return a color which is 10% *darker* than @color

                    saturate(@color, 10%);    // return a color 10% *more* saturated than @color
                    desaturate(@color, 10%);  // return a color 10% *less* saturated than @color

                    fadein(@color, 10%);      // return a color 10% *less* transparent than @color
                    fadeout(@color, 10%);     // return a color 10% *more* transparent than @color

                    spin(@color, 10);         // return a color with a 10 degree larger in hue than @color
                    spin(@color, -10);        // return a color with a 10 degree smaller hue than @color

使用這種functions方法很簡單。

                    @base: #f04615;
                    #header {
                        color: @base;
                        background-color: fadein(@base, 10%);
                        h1 {
                            color: lighten(@base,20%);
                            background-color: lighten(fadeout(@base,20%),5%);
                            a {
                                color: darken(@base,50%);
                                background-color: spin(@base,10);
                                &:hover {
                                    color: saturate(@base,30%);
                                    background-color: fadein(spin(@base,-5),20%);
                                }
                            }
                        }
                        p {
                            color: desaturate(@base,60%);
                        }
                    }

編譯後：

                    #header {
                        background-color: #F04615;
                        color: #F04615;
                    }
                    #header h1 {
                        background-color: rgba(242, 89, 45, 0.8);
                        color: #F69275;
                    }
                    #header h1 a {
                        background-color: #F06B15;
                        color: #060200;
                    }
                    #header h1 a:hover {
                        background-color: #F03415;
                        color: #FF3E06;
                    }
                    #header p {
                        color: #A56F60;
                    }

2、Math函式

LESS提供了一組方便的數學函式，你可以使用它們處理一些數字型別的值:

round(1.67); // returns `2`
ceil(2.4);   // returns `3`
floor(2.6);  // returns `2`

如果你想將一個值轉化為百分比，你可以使用percentage函式:

percentage(0.5); // returns `50%

名稱空間

有時候，你可能為了更好組織CSS或者單純是為了更好的封裝，將一些變數或者混合模組打包起來, 你可以像下面這樣在#bundle中定義一些屬性集之後可以重複使用。

#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { ">
  }
  .tab { ... }
  .citation { ... }
}

你只需要在 #header a中像這樣引入 .button:

#headera {
  color: orange;
  #bundle > .button;
}

註釋

與js類似，單行註釋用“//”，單行註釋用“/*...*/”。

匯入Less

在開發階段，我們可以將不同的樣式放到多個檔案中，最後通過@import 的方式合併。意思就是，當出現多個 less 檔案時，怎麼引用它們。這個很好理解， css 檔案可以有很多個，less檔案也可以有很多個。

1）定義一個被引用的less檔案，名為_button1.less：

PS：被引用的less檔案，我們習慣在前面加下劃線，表示它是部分檔案。

@btnColor: red;
.btn{
  line-height: 100px;
  color: @btnColor;
}

2）匯入

@import url('_button1.less:');    //這裡的路徑寫的是相對路徑

body{
  width: 1024px;
}

編譯後：

.btn {
    line-height: 100px;
    color: red;
}

body {
    width: 1024px;
}

使用Less

方法1

Less 的編譯，依賴於 NodeJS 環境。因此，我們需要先安裝 NodeJS。

1、安裝Node.js

去 Node.js 的官網下載安裝包。

安裝完成後，配置環境變數，在 path 變數中追加安裝路徑：;C:\Program Files\nodejs。

PS：可能會自動添加了環境變數。

在 cmd 命令列，輸入"node -v"，可以檢視 node.js 的版本。

2、安裝lessc編譯環境

由於新版的NodeJS已經集成了npm，所以之前npm也一併安裝好了。同樣可以使用cmd命令列輸入"npm -v"來測試是否成功安裝。

可以輸入下面的命令安裝：npm install -g less

然後在 cmd 中輸入"lessc -v"，如果能看到版本資訊，說明 less編譯環境安裝成功。

3、將less檔案編譯為css檔案

在 less 所在的路徑下，輸入lesscxxx.less，即可編譯成功。

如果輸入lesscxxx.less > ..\xx.css，表示輸出到指定路徑。

方法2

客戶端的使用其實好簡單，我們最開始引用的就是客戶端的使用方法，使用這種方法前提條件是需要一個 less.js 的指令碼支援，大家可以先到點選下載less.js然後把他引用到頁面的head中。

<link rel="stylesheet/less" type="text/css" href="styles.less">     //less檔案必須放指令碼js檔案的前面！！
<script src="less.js" type="text/javascript"></script>

PS：其中src所指定的路徑是你專案中的相對路徑，當然你也可以把這個js放到你認為安全可用的伺服器上，換成絕對路徑也是可以的。接著我們就需要把less檔案引進到專案中，這個引入的方式和css方式是一樣的，只是有一點點不同，css中的是rel="stylesheet"而less的卻是rel="stylesheet/less"。