第一次接觸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;}
但是編譯后發現：
代碼中可以看出，最后一次定義的@color覆蓋了前面的內容
#header{color:#ff3636}
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
感謝原文博主的總結！