css是不能夠定義變量的，也不能嵌套。它沒有編程語言的特性。在項目開發中，常常發現有很多css代碼是相同的，但我們通常都是複製然後粘貼。
舉個例子：假設h5應用裏主題色是#FF3A6D，可能用於文字或者背景色。通常開發中，哪裏需要這個顏色，我們就複製這個顏色並粘貼。下次要修改就得全部查找批量替換，其實不是很方便。
本文即將介紹的less將讓我們更快更方便的編寫css代碼。
Less是什麼
Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增加了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、方便製作主題、擴充。
less使用.less作爲文件後綴。通過第三方工具，可以一鍵或者實時編譯成對應的css文件。
示例：
demo.less
@base: #f938ab;/*定義變量*/
.box { color: @base;
border-color: lighten(@base, 30%); /*使用函數*/ /*嵌套*/
&-content{ width:100%;
}
.title{ color:#ccc;
}
}通過第三方工具，編譯後生成：
demo.css
.box { color: #f938ab; border-color: #fdcdea;
}.box-content { width: 100%;
}.box .title { color: #ccc;
}實際項目中，我們編輯的是.less文件，但引用時依舊像往常一樣引用.css文件。通過第三方工具（例如Koala），可以實現.less文件一發生改變，就生成同名的.css文件。後文有介紹，等不及的同學可以先去看看怎麼編譯成css文件，再返回來看less相關特性和例子。
語言特性
由於less文件本身就是文本，所以不用特別安裝什麼編輯器，通常的代碼編輯器都能進行編輯。推薦使用sublime text（建議安裝插件Less，以支持less語法高亮）。
變量
使用@符號定義。例如：
@base: #f938ab;.box { color: @base; /*變量引用*/
}變量的作用就是把值定義在一個地方（或一個文件裏，通過@import導入），然後在各處使用，這樣能讓代碼更易維護。
變量也支持URLs：
// Variables
@images: "../img";// 用法body { color: #444; background: url("@{images}/white-sand.png");
}屬性也支持變量的形式：
@property: color;
.widget {
@{property}: #0ee;
background-@{property}: #999;
}混合（Mixin）
混合就是前面定義的一個樣式，後文可以直接引用。示例：
@base: #f938ab;
.ellipsis_txt { display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden; word-break: break-all; text-overflow: ellipsis; -webkit-box-orient: vertical;
}
.box { color: @base;
.ellipsis_txt;
/*或者
.ellipsis_txt();
*/
}括號是可選的。
嵌套
可以在一個css裏有多個css塊，以方便我們更好的組織代碼，編寫css模板。
#header { color: black;
.navigation {
font-size: 12px;
}
.logo { width: 300px;
}
}生成：
#header { color: black;
}#header .navigation { font-size: 12px;
}#header .logo { width: 300px;
}還支持&符號：
#header { color: black;
&-navigation {
font-size: 12px;
}
&-logo { width: 300px;
}
&:hover{ color:#ccc;
}
}生成：
#header { color: black;
}#header-navigation { font-size: 12px;
}#header-logo { width: 300px;
}#header:hover { color: #ccc;
}運算
任何數字、顏色或者變量都可以參與運算。下面是一組案例：
@base: 5%; @filler: @base * 2; @other: @base + @filler; color: #888 / 4; background-color: @base-color + #111; height: 100% / 2 + @filler;
示例：
@var: 1px + 5;div{ width:@var;
}輸出：
div { width: 6px;
}函數
Less 內置了多種函數用於轉換顏色、處理字符串、算術運算等。這些函數在函數手冊中有詳細介紹。
函數的用法非常簡單。下面這個例子將介紹如何將 0.5 轉換爲 50%，將顏色飽和度增加 5%，以及顏色亮度降低 25% 並且色相值增加 8 等用法：
@base: #f04615;
@width: 0.5;
.class { width: percentage(@width); // returns `50%` color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}編譯生成：
.class { width: 50%; color: #f6430f; background-color: #f8b38d;
}命名空間
有時候，你可能爲了更好組織 CSS 或者單純是爲了更好的封裝，將一些變量或者混合模塊打包起來，一些屬性集之後可以重複使用。
示例：
/*模塊*/#bundle {
.button { display: block; border: 1px solid black;
background-color: grey;
&:hover {
background-color: white
}
}
.tab { /**/ }
.citation { /**/ }
}/*下面複用上面的一部分代碼*/#header a { color: orange; #bundle > .button;
}編譯生成：
#bundle .button { display: block; border: 1px solid black; background-color: grey;
}#bundle .button:hover { background-color: white;
}#bundle .tab { /**/
}#bundle .citation { /**/
}/*下面複用上面的一部分代碼*/#header a { color: orange; display: block; border: 1px solid black; background-color: grey;
}#header a:hover { background-color: white;
}LESS中的命名空間，屬於高級語法，在日常項目中應用比較廣泛。我們可以用LESS中的命名空間爲自己封裝一些日常比較常用的類名，以便以後做項目的時候更有效率。
作用域
子類裏面的優先，找不到才往父類裏找。
示例：
@var: red;#page {
@var: white; #header {
color: @var; // 這裏值是white
}
}也不會因爲變量後面定義而影響作用域：
@var: red;#page { #header {
color: @var; // white
}
@var: white;
}和上面的例子是一樣的。
註釋
css僅支持塊註釋。less裏塊註釋和行註釋都可以使用：
/* 一個註釋塊 style comment! */ @var: red;// 這一行被註釋掉了！ @var: white;
導入
和css一樣，你可以導入一個 .less 文件，此文件中的所有變量就可以全部使用了。如果導入的文件是 .less擴展名，則可以將擴展名省略掉：
@import "library"; // library.less @import "typo.css";
函數參考
這些平常應該用的不多吧。
color(string) 解析顏色,將代表顏色的字符串轉換爲顏色值 convert(value,unit) 將數字從一種單位轉換到另一種單位.第一個參數爲帶單位的數值,第二個參數爲單位. ceil(number)向上取整floor(number)向下取整 percentage(number)將浮點數轉換爲百分比字符串round(number)四捨五入取整sqrt(number)計算一個數的平方根,並原樣保持單位 pow(number,number)設第一個參數爲A,第二個參數爲B,返回A的B次方.mod(number,number)返回第一個參數對第二參數取餘的結果.min(value1, ..., valueN)返回一系列值中最小的那個.max(value1, ..., valueN)返回一系列值中最大的那個.abs(number)計算數字的絕對值,並原樣保持單位sin(number)正弦函數cos(number)餘弦函數asin(number)反正弦函數.返回以弧度爲單位的角度,區間在 -PI/2 到 PI/2之間.acos(number)反餘弦函數.區間在 0 到 PI之間.tan(number)正切函數atan(number)反正切函數 pi()返回圓周率 π (pi) isnumber(value)如果待驗證的值爲數字則返回 true,否則返回 false isstring(value)如果待驗證的值是字符串則返回 true,否則返回 false iscolor(value)如果待驗證的值爲顏色則返回 true,否則返回 false
更多：http://less.bootcss.com/functions/
如何編譯
第三方的編譯工具有很多，下面列舉常用的。
命令行lessc
官網：http://lesscss.org
github：http://github.com/less/less.js
需要先安裝node.js。
安裝好nodejs後，在命令行輸入：
npm install -g less
以安裝lessc。
安裝 Less 後，就可以在命令行上調用 Less 編譯器了，如下：
lessc styles.less
這將輸出編譯之後的 CSS 代碼到stdout，你可以將輸出重定向到一個文件：
lessc styles.less > styles.css
若要輸出壓縮過的 CSS，只需添加 -x 選項:
lessc styles.less > styles.css -x
如果希望獲得更好的壓縮效果，還可以通過 --clean-css 選項啓用 Clean CSS 進行壓縮，需要先安裝好插件：
npm install -g less-plugin-clean-css
執行 lessc 且不帶任何參數，就會在命令行上輸出所有可用選項的列表。
lessc暫不支持實時編譯。
Koala
官網：http://koala-app.com/index-zh.html
下載：https://pan.baidu.com/s/1o7wLvPg
使用Koala是因爲它是個客戶端，更簡單。更重要的，還能實時編譯，這對於實際開發很有幫助。
koala是一個前端預處理器語言圖形編譯工具，支持Less、Sass、Compass、CoffeeScript，幫助web開發者更高效地使用它們進行開發。跨平臺運行，完美兼容windows、linux、mac。
使用起來很簡單，只需要將less文件所在的目錄拖到軟件工作窗口，選擇需要編譯的less文件就行了。只要你改動less文件裏的代碼，就會自動生成同名的css文件。速度非常快。感興趣的可以下載試試。