提要：
1. 什么是css預處理器？
2. 如何使用Less？
3. Less的特點
4. Less的優缺點
一 什么是css預處理
css 預處理是一種語言為css增加了一些編程的特征，并且無需考慮瀏覽器的兼容性，你可以在你的css樣式中使用變量，簡單的邏輯處理，甚至函數。
我的理解這個處理器就是把你的寫的這些less，sass，stylus也好，統統轉換成瀏覽器能識別的css樣式。
目前比較普通的是這三款預處理架構、分別是
Sass(http://sass-lang.com/)
Less css（http://lesscss.org/）
stylus（http://stylus-lang.com）
Sass文件使用.sass拓展名，Less使用.less拓展名，相應的Stylus使用.styl拓展名。
二 如何使用Less
node環境下運行：npm install less
客戶端使用Less的話，直接在項目中引入less.js文件即可。但要在.less 文件前引入。
三 Less 特點
a.使用變量
例如一些通用的顏色值，圖片路徑等，
使用變量的兩個好處：多出利用和方便維護，只需要改變量值就行了。
less中變量名使用@符號開始，在Sass中則是使用$開頭，在Stylus中無限制。
@mainColor: #333;
@width: 1024px;
span {
width: @width;
border: 1px solid @mainColor;
}
編譯結果：
span {
width:1024px;
border: 1px solid #333;
}
b. 使用嵌套語法
.TopBar {
padding: 14px 0;
border-bottom: 1px solid #eee;
line-height: 28px;
.ddColor {
color :#fff;
a {
text-decoration:none;
&:hover {
border-width: 1px;
}
}
}
}
編譯結果：
.TopBar {
padding:14px 0;
border-bottom: 1px solid #eee;
line-height: 28px;
}
.TopBar .ddColor {
color:#fff;
}
.TopBar .ddColor a {
text-decoration: none;
}
.TopBar .ddColor a:hover {
border-width: 1px;
}
這里之后的樣式嵌套在.TopBar下，可以省略嵌套前的標簽屬性類等。
c. 運算符
css都能加減乘除了
@color: #111;
div {
background:@color+#222;
編譯結果：
div {
background: #333;
}
d.處理瀏覽器兼容
這個是我認為最實用的一個功能，避免了做重復的事情。
例如解決瀏覽器兼容問題，使用border-radius需要加上瀏覽器前綴，麻煩而且代碼冗余。
.border-radius(@values){
-webkit-border-radius: @values;
-moz-border-radius: @values;
border-radius: @values;
}
div {
@border-raduis(10px);
}
編譯結果：
div {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
a{@transition(all 0.4s);}
編譯結果：
a {
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
e:Mixins(混入)
有點類似與js定義的全局變量，到處都能直接調用。
例如：定義了一個錯誤提示，字體變大變紅。
.error(@fontsize:20px){
font-size:@fontsize;
color:red;
}
其他地方直接調用@error(10px);即可。
f：less的導入
less中可以導入css文件也可以導入less文件。導入css文件會保持原樣，less文件會被編譯。并且less的導入不要求放在頂部。
@import"untils";
@import"bootstrap-theme";
這里并沒有指定less后綴文件，導入時會默認為less文件，等同于
@import"untils.less";
@import"bootstrap-theme.less";
例如：
span {
@import"bootstrap-theme";
}
那么這里導入的樣式將作用于span標簽。
甚至還可以針對媒體查詢的結果來指定導入less文件
例如
@import"untils.less"screen and (max-width:400px);
編譯結果：
@media screen and（max-width:400px）{
untils.css樣式........
}
g. less 中使用注釋
單行注釋使用// 或者css的注釋符號，多行注釋使用
//Hi, I'm a slient comment.
.class {color:white}
.class{color: white}
大概總結了一下Less的優缺點：
優點：
a. css的語法不夠強大，需要重復書寫很多重復的選擇器.less剛好解決了這一問題。
b. 提供變量和邏輯控制
c. 合理的樣式復用機制 減少代碼的冗余
d. 提高代碼的可維護性
e. mixin混入
缺點：
a. 也需花費一定時間去了解學習使用這個預處理，團隊協作的難度加大
b. 個人感覺是css本來就是很簡單的東西，less中的有些處理反而讓它變得更復雜。
