博客原文地址：Claiyre的個人博客 https://claiyre.github.io/
博客園地址：http://www.cnblogs.com/nuannuan7362/
如需轉載，請在文章開頭注明原文地址
前言
less作為css語言的擴展，賦予了css動態語言的特性，如：變量，繼承，運算，函數等。如果你原本就是程序員，你一定會非常喜愛less，它可以幫你節省很多重復工作，可以讓你像編寫一門動態語言一樣地編寫css。
本文總結了less的相關語法和使用方式，可供查閱和入門使用。
正文
語法
變量
less允許使用變量，可以將一個多次用到的值設為一個變量。less中沒有類型限制，以符號@標識變量，在聲明或使用變量時再變量名前添加符號@即可
@bg-color: #fff;
@base-font-size: 16px;
//使用
.body{
background-color: @bg-color;
font-size: @base-font-size;
}
多數情況下，我們是將這個變量當做一個常量來使用；less中變量也只能被定義一次這一點使之更像常量。
混合
將需要用到多次的全局css樣式集成為一個css類，在其他類中可以直接引用這個集成類，這個過程稱為混合。
實例：
.base-border{
border: 2px solid #0c6dc7;
border-radius: 6px;
}
.img-top{
width: 150px;
height: 150px;
.base-border
}
.img-bottom{
width: 200px;
height: 150px;
.base-border
}
上面的會被解析為
.img-top{
width: 150px;
height: 150px;
border: 2px solid #0c6dc7;
border-radius: 6px;
}
.img-bottom{
width: 200px;
height: 150px;
border: 2px solid #0c6dc7;
border-radius: 6px;
}
個人認為混合與傳統OO語言的繼承頗為相似，子類繼承父類的特征的同時，也可以添加自己專有的特征。
帶參數的混合
在使用混合時，less允許給父類傳入參數，參數使我們可以更加靈活地運用混合
比如，可以稍微改動上面的.base-border類
.base-border(@radius){
border: 2px solid #0c6dc7;
border-radius: @radius;
}
//使用
.img-top{
width: 150px;
height: 150px;
.base-border(10px);
}
.img-bottom{
width: 200px;
height: 150px;
.base-border(15px);
}
還可以設置參數的默認值，多個參數用逗號隔開：
.base-border(@color: #0c6dc7,@radius: 6px){
border: 2px solid @color;
border-radius: @radius;
}
//使用
.img-top{
width: 150px;
height: 150px;
.base-border; //默認是顏色#0c6dc7，半徑6px
}
.img-bottom{
width: 200px;
height: 150px;
.base-border(#ff0000,15px);
}
在一個帶參數的類中，我們可以通過@arguments來獲取傳進來的所有參數，可以整體作為某個屬性的值。
嵌套規則
嵌套規則基於html的文檔結構，可以減少我們對一些css選擇器的使用，使代碼更易懂，更簡潔。
例如，我們需要設置這樣的樣式：
.parent{
background-color: #ff0000;
}
.parent .child{
height: 200px;
width: 200px;
}
.parent.ancestor{
border: 2px solid #000;
}
用less可以這樣嵌套，文檔結構更加明顯：
.parent{
background-color: #ff0000;
.child{
height: 200px;
width: 200px;
}
&.ancestor{
border: 2px solid #000;
}
}
符號&,表示“and”，也可以理解為父級選擇器。
顏色函數
less提供了多個顏色運算的函數，非常方便
| 函數 | 功能 |
|---|---|
| lighten(@color,10%) | 返回一個比@color亮10%的顏色 |
| darken(@color,10%) | 返回一個比@color暗10%的顏色 |
| saturate(@color,10%) | 返回一個比@color飽和度高10%的顏色 |
| desaturate(@color,10%) | 返回一個比@color飽和度低10%的顏色 |
| fadein(@color,10%) | 返回一個比@color透明度低10%的顏色，透明度低，顏色更深 |
| fadeout(@color,10%) | 返回一個比@color透明度高10%的顏色，透明度高，顏色更淺 |
| fade(@color,90%) | 返回一個透明度為0.9的顏色，等於fadeout(@color,10%) |
| spin(@color,10) | 返回顏色的hue值比@color大10度 |
| spin(@color,-10) | 返回顏色的hue值比@color小10度 |
| mix(@color-1,@color-2) | 返回@color-1和@color-2混合后的顏色 |
這些顏色運算函數會先將顏色轉化為HSL色彩空間，然后在通道級別運算
math函數
less還提供了幾個math函數，用來處理數字
| 函數 | 功能 |
|---|---|
| ceil(@number) | 向上取整 |
| floor(@number) | 向下取整 |
| round(@number) | 四舍五入 |
匹配模式
less匹配即判斷是否滿足條件，相當於switch或if-else if的用法，彌補了less不支持switchh和if的缺憾。
實例用法：
.special-border(top,@color){ // 匹配top 1
border-top: 2px solid @color;
border-top-left-radius: 10px;
border-top-right-radius: 20px;
}
.special-border(bottom,@color){ // 匹配bottom 2
border-bottom: 2px solid @color;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 10px;
}
.special-border(@_,@color){ //匹配所有 3
border-right: 2px solid @color;
border-left: 2px solid @color;
}
.content{
.special-border(bottom, #73d79c);
height: 200px;
width: 200px;
}
上述代碼中.content類匹配了2和3
導引
導引是對參數是否滿足一定條件的匹配，不是對參數值得匹配。搭配when語句使用。
.class(@a) when(@a > 10){ ... }
.class(@a) when(iscolor(@a)){ ... }
.class(@this-media) when(@this-media = mobile){ ... }
.class(@a) when(@a){ ... } //僅當@a = true 時才可匹配
注意，在導引后的when語句中，若是只有單獨的值，則除布爾值true以外的任何值都被視作假
導入
在文件開頭通過關鍵字@import導入其他樣式文件
@import "style.less"
@import "style"
@import "style.css"
以.less為后綴的文件的后綴名帶不帶均可
另： less不會處理.css的文件
變量作用域
less中的變量作用域和其他語言類似，首先會從本地查找變量或者混合模塊，如果沒找到的話會去父級作用域中查找，直到找到為止.
注釋
兩種注釋方法，應注意其區別：
/*這是注釋，編譯為css后不會被濾掉*/
//這也是注釋，編譯為css后會被濾掉
使用
less可以在客戶端使用，也可以在服務端使用
客戶端使用
- 在html頭部引入你的
.less樣式文件 - 在html頭部引入
less.js文件
上述引入文件的順序不可顛倒
服務器端使用
- 先安裝，最簡便的方法是通過npm包管理器安裝
$ npm install less
// 或安裝最新穩定版本的 LESS
$ npm install less@latest
- 在文件頭部通過require引入less即可使用
在命令行中手動將less編譯為css文件
$ lessc styles.less > styles.css
結語
less並未減弱css的任何強大之處，在任何時候都可以回退至原始css，同時讓習慣動態語言的程序員可以更方便地編寫less。與其功能類似的有sass，兩者各有優點，都值得一學。