第一次接觸CSS預編譯，然後對比後發現其實less的上手容易度確實比sass高不少，再加上公司專案也是使用的less。所以想想還是根據網上的各種教程，整理出來了一些比較基礎的、而且比較能讓我們這種初學者快速上手的例子。

菜雞一隻，程式碼要是有錯或者表達不清的地方，請各位批評指正！

那麼，現在我們就開始正文部分了。

1.什麼是less 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語法基礎上增加許多額外的功能。 1.1 如何使用less 要成功的使用Less，需要一個指令碼的支援，這個指令碼我們把他叫做less.js。然後在頁面中引用即可

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

2.LESS包含了什麼？ Less具體有哪些東東呢？Less要CSS語法的基礎上進行了擴充套件，主要包含： Variables(變數)， Mixins(混入)、Nested Rules(巢狀規則)、Functions & Operations(函式與動作)等等 然後，需要解釋下一些在LESS中常用的內容： 2.1、變數——Variables Less中的變數充許你在樣式中的某個地方對常用的值進行定義，然後應用到樣式中，這樣只要改變你定義的變數引數值就可以了

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

編譯為CSS後：

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

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

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

編譯為CSS後：

#header {color: #6c94be;}

需要注意的是，less的變數實際上應該為常量，不存在二次賦值的情況，如下所示　　

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

但是編譯後發現：　　

#header{color:#ff3636}

　　程式碼中可以看出，最後一次定義的@color覆蓋了前面的內容 2.2 混入——Mixins 混入其實就是一種巢狀，它充許你將一個類嵌入到另一個類中，而被嵌入的這個類也稱為是一個變數。換句話說，你可以用一個 類定義CSS，然後把整個為當作一個變數來使用，嵌入到另一人類中當作他的屬性；另外混入也像一個帶有引數的functions，如 下面的例子：

/*========= 定義一個類 ===========*/
.roundedCorners(@radius:5px) {
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
}
/*＝＝＝＝＝＝＝＝＝＝ 定義的類應用到另個一個類中 ＝＝＝＝＝＝＝＝＝＝＝*/
＃header {
    .roundedCorners;
}
#footer {
    .roundedCorners(10px);
}

編譯後的CSS如下：

#header {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
#footer {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

需要注意一點：這樣任何CSS的類或ID下的樣式都可以當作變數，使用混入模式用來當作另一個元素的屬性值。 混入(Mixin)有一個名詞叫“混入引數（Parametric Mixins）”，上面也說過。Less具有一個特殊型別的規則集，那就是一個類 可以當作另一個元素的屬生值，並且還可以接受其自己的引數，我們來看一個典型的例項：

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

編譯後CSS程式碼如下：

#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的引數定義一人預設值，如

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

編譯後的CSS如下：

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

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

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

編譯後的CSS如下：

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

Mixins還有一個重要的變數：@arguments。@arguments在Mixins中具是一個很特別的引數，當Mixins引用這個引數時，他

將表示所有的變數，當你不想處理個別的引數時，這個將很有用，我們來看一個陰影的例項：

.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);
}

再看下編譯後的CSS：

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

3、巢狀規則——Nested Rules 巢狀規則主要是針對一多層元素的樣式規則寫法，以前我們在多層元素中寫樣式，要麼從頭選下來，要麼另外給這個元素加上類 名或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結構來寫的。 從上在的例項程式碼中，都很清楚的瞭解到，巢狀規則可以讓我們寫樣式時能像DOM樹形那樣有結構的去寫程式碼，從而減了選 擇器的層級關係，更主要的是這樣使用我們的程式碼更簡潔，更具有閱讀性，這種巢狀規則對我們操作偽元素更為方便和重要， 如:hover，:link,:focus等，看下例項：

a {
    color: red;
    text-decoration: none;
    &:hover {
        color: blue;
        text-decoration: underline;
    }
}

編譯後的CSS如下：

a {
    color: red;
    text-decoration: none;
}
a:hover {
    color: blue;
    text-decoration: underline;
}

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

#header {
    &.fl{
        float: left;
    }
    .mln {
        margin-left: 0;
    }
}

然後看下編譯後的CSS：

#header.fl{float: left;}
#header .mln {margin-left: 0;}

4、Functions & Operations 其實這個部分的內容我還沒有完全理解透，但是在專案有很多地方都在使用並且很多博文中也有提及到，所以我覺得雖然暫時無法理解，但是還是要作好記錄。書讀百遍，其義自見，程式碼和理論這種東西也不例外。做好記錄並且時常複習下，再結合工作中的使用，這種問題就會慢慢的由自己的答案 這兩個功能很有意思的。在我們平時的樣式中，有很多元素的屬性都具有一定的比例或倍數。那麼這兩個剛好可以幫我們實現這 方面的功能，首先來看Operations（直譯“動作”）他可以讓你對元素的屬性值，顏色進行四則運算：加、減、乘、除。而 Function就像javascript中的function一樣可以讓你進行你想要的值的操作。下面我們先來看一個簡單的例項：

@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
    color: @base-color *3;
    border: 1px solid desaturate(@red,100%);
    border-width: @the-border @the-border*2 @the-border*3 @the-border;
    border-color:desaturate(@red,100%) @red lighten(@red, 10%) darken(@red, 30%);
}

來看下編譯後的CSS:

#header {
    color: #333;
    border: 1px solid #4a4a4a;
    border-width: 1px 2px 3px 1px;
    border-color: #4A4A4A #842210 #B12E16 #000000;
}

這裡提出一點，Less中的Operations主要是針對任何數字、顏色、變數的操作，可以對其是行加、減、、乘、除或者更復雜的 綜合運算；而Functions主要是針對Color funtions，Less提供了多種變換顏色的功能，下面多們來俱體看一下這兩個功能的 使用。 先來看Operation的使用

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

編譯後的CSS：

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

上面是一些簡單的四則運算，它們都是在同一單位下進行操作，現在我們一起來看一個不同單位的操作

@var: 1px + 5;
#header {
    border: @var solid red;
}

編譯後的CSS如下：

#header {border: 6px solid red;}

上面的程式碼直接反應出了，“@var: 1px + 5”，Less最終解析的值是“6px”。在Less中我們同樣可以像做小學算術一樣，使用 括號“（）”來改變其運算的先後順序，如：

@var: 20px;
#header {
    width: @var + 5 * 2;
    height: (@var + 5 ) * 2;
}

看一下編譯後的結果：

#header {
    height: 50px;
    width: 30px;
}

從結果中我們很明顯的得出他們的區別 @var: 20px; #header { width: @var + 5 * 2;/* 先計算了5 * 2 = 10 然後在計算了 @var + 10 = 30px,其實就是"@var+(5*2)"*/ height: (@var + 5 ) * 2;/*先計算了(@var + 5) = 25px,然後在計算了25*2=50px，因為括號更具有優先權，小學數學題*/ } 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; 
    h1 {
        color: lighten(@base,20%);
            a {
                color: darken(@base,50%);
                &:hover {
                    color: saturate(@base,30%);
                }
            }
        }
    p {
        color: desaturate(@base,60%);
    }
}        

來看下編譯後的CSS:

#header {
    color: #F04615;
}
#header h1 { 
    color: #F69275;
}
#header h1 a { 
    color: #060200;
}
#header h1 a:hover { 
    color: #FF3E06;
}
#header p {
    color: #A56F60;
}

大家還可以通過這樣的方式提取顏色值 hue(@color); // returns the `hue` channel of @color saturation(@color); // returns the `saturation` channel of @color lightness(@color); // returns the 'lightness' channel of @color 下面我們來看一下如何取得他的顏色

@color: #f36;
#header {
 　　background-color: hsl(hue(@color),45%,90%);
}

編譯後的程式碼如下：

#header {background-color: #F1DAE0;}

ps.這裡其實我需要給自己寫一個類似於書籤之類的標註吧...畢竟這塊對於顏色的控制確實不算搞的太明白，所以還是換成紅色文字提醒下自己，多看幾遍，多寫兩行程式碼。

5、名稱空間——Namespaces 有時候你想把一些變數或mixins組織起來，並將他封裝，想用的時候就把要關的一部分取出來，那麼我們將在前面的mixins基礎 上將其功能擴充套件，比如說我們有一個這樣的庫：

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

現在在實際操作中，我們header中的a樣式和.button一樣，那麼我們就可以這樣操作：

#header a {
    color: orange;
    #bundle > .button;
}

換過一種思維來說，如果頁面上有幾個部分的樣是完全一樣的，或者只是部分不同，我們就可以這樣來寫，就如上面的程式碼， #bundle可是以web頁面中已存在的元素，然後#header中的a元素和#bundle中的.button樣式是一樣的，那麼我們就可以把 #bundle中 .button的所有樣式引用到#header中的a元素上。 6、變數範圍——Scope Less中的變數和別的程式語言一樣，他的變數也有一個範圍概念，這個概念就有點像區域性變數和全域性變數一樣，只是在Less中採 取的是就近原則，換句話說，元素先找本身有沒有這個變數存在，如果本身存在，就取本身中的變數，如果本身不存在，就尋找 父元素，依此類推，直到尋找到相對應的變數，我們來看個簡單的例項：

@var: red;
#page {
    @var: white;
    #header {
    color: @var; // white
    }
}
#footer {
    color: @var; // red
}

7、Less的註解——Comments Less中的註解有兩種方式，單行註解很像js中的，如： // Hi, I'm a silent comment, I won't show up in your CSS .class { color: white } Less中的多行註解和使用css中的一樣： /* Hello, I'm a CSS-style comment */ .class { color: black } 當然單行註解也可以使用css的方式註解，本人更強調使用css中的註解方式： /* Hello, I'm a CSS-style comment */ .class { color: black } 8、客戶端的使用——Client-side usage 客戶端的使用其實好簡單，我們最開始引用的就是客戶端的使用方法，使用這種方法前提條件是需要一個less.js的指令碼支援，大 家可以先到點選下載less.js然後把他引用到頁面的head中，如下所示： <script src="less.js" type="text/javascript"></script> }}} 其中src所指定的路徑是你專案中的相對路徑，當然你也可以把這個js放到你認為安全可用的伺服器上，換成絕對路徑也是可以的。接著我們就 需要把less檔案引進到專案中，這個引入的方式和css方式是一樣的，只是有一點點不同，css中的是“rel="stylesheet"”而less的卻是“rel="s tylesheet/less"”,請看下面的程式碼： {{{class="prettyprint" <link rel="stylesheet/less" type="text/css" href="styles.less"> 特別強調一點，客戶端使用Less,一定要注意，“Less樣式檔案一定要放在less指令碼檔案之前”。 正確的引入方式： <link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script> 錯誤的引入方式： <script src="less.js" type="text/javascript"></script>中 <link rel="stylesheet/less" type="text/css" href="styles.less"> 　　總結一下 　　　　less的基礎用法大概就有這些，理解了這些東西，也足夠我們在工作中的使用與原始碼閱讀。可以感覺出來，其實less在學習成本以及學習難易度上確實不是很難。如果在以後的工作中用到SASS的話，我會再做一次學習與總結。還有就是需要做與LESS做下　　　　對比學習 　　文章程式碼以及部分內容來自 http://www.w3cplus.com/css/less 　　感謝原文博主的總結！