less 是基於CSS的一種擴展技術
.less 透過解析器（如koala）轉換檔案格式為CSS
@+變數名稱+值
語法
變數
LESS 允許開發者自訂變量，變數可以在全域樣式中使用，變數使得樣式修改起來更加簡單。
我們可以從下面的程式碼中了解變數的使用及功能：
清單 3 LESS 檔案
@border-color : #b5bcc7;
.mythemes tableBorder{
border : 1px solid @border-color;
}
經過編譯產生的CSS 檔案如下：
清單4. CSS 檔案
.mythemes tableorder { bcc f的程式碼中我們可以看出，變數是VALUE（值）等級的複用，可以將相同的值定義成變數統一管理起來。
此特性適用於定義主題，我們可以將背景顏色、字體顏色、邊框屬性等常規樣式進行統一定義，這樣不同的主題只需要定義不同的變數檔案就可以了。當然該特性也同樣適用於CSS RESET（重置樣式表），在Web 開發中，我們往往需要屏蔽瀏覽器預設的樣式行為而需要重新定義樣式表來覆蓋瀏覽器的預設行為，這裡可以使用LESS 的變數特性，這樣就可以在不同的項目間重複使用樣式表，我們只需要在不同的項目樣式表中，依照需求重新賦值給變數即可。
LESS 中的變數和其他程式語言一樣，可以實現值的複用，同樣它也有生命週期，也就是Scope（變數範圍，開發人員慣稱之為作用域），簡單的講就是局部變數還是全域變量的概念，找出變數的順序是先在局部定義中找，如果找不到，則找上級定義，直到全域。下面我們透過一個簡單的例子來解釋 Scope。
清單5. LESS 檔案
@width : 20px;
#homeDiv {
@width : 30px;
#centerDiv{
width : @widthth
#centerDiv{
width : @widthth;// 此處應該取一個最近定義的變數
#leftDiv {
width : @width; // 這裡應該取最上面定義的變數width 的值20px
}
經過編譯後產生的CSS 檔案如下：
#homeDiv #centerDiv {
width: 30px;
}
#leftDiv {
width: 20pidth
）功能對用開發者來說並不陌生，許多動態語言都支援Mixins（混入）特性，它是多重繼承的一種實現，在LESS 中，混入是指在一個CLASS 中引入另外一個已經定義的CLASS ，就像在目前CLASS 中增加一個屬性一樣。
我們先簡單看一下Mixins 在LESS 中的使用：
清單7. LESS 檔案
// 定義一個樣式選擇器
.roundedCorners(@radius:5px) {
-moz-border-radius: @radius;
- webkit-border-radius: @radius;
border-radius: @radius;
}
// 在另外的樣式選擇器中使用
#header {
.roundedCorners;
}
#footerpfidee #footof， ;
}
經過編譯後產生的CSS 檔案如下：
清單8. CSS 檔案
#header {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-
-webkit-border-radius:5px;
border-radius:5px; }
#footer {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
從上面的程式碼我們可以看出：Mixins 其實是一種嵌件套，它允許將一個類別嵌入到另外一個類別中使用，被嵌入的類別也可以稱作變量，簡單的講，Mixins 其實是規則層級的複用。
Mixins 還有一種形式稱為Parametric Mixins（混入參數），LESS 也支援這個特性：
清單9. LESS 檔案
// 定義一個樣式選擇器
.borderRadius(@radius){
-moz-border-radiusius : @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
// 使用已定義的樣式選擇器
#header {
.borderRadius(10px);作為參數傳遞給樣式選擇器
}
.btn {
.borderRadius(3px);// // 把3px 作為參數傳遞給樣式選擇器
}
经过编译生成的 CSS 文件如下：
清单 10. 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 的参数定义一人默认值，如
清单 11. LESS 文件
.borderRadius(@radius:5px){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
.btn {
.borderRadius;
}
经过编译生成的 CSS 文件如下：
清单 12. CSS 文件
.btn {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
像 JavaScript 中 arguments一样，Mixins 也有这样一个变量：@arguments。@arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码。
清单 13. LESS 文件
.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 文件如下：
清单 14. CSS 文件
#header {
-moz-box-shadow: 2px 2px 3px #FF36;
-webkit-box-shadow: 2px 2px 3px #FF36;
box-shadow: 2px 2px 3px #FF36;
}
Mixins 是 LESS 中很重要的特性之一，这里也写了很多例子，看到这些例子你是否会有这样的疑问：当我们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？如果你是 java 程序员或 C++ 程序员，我猜你肯定会想到命名空间 Namespaces，LESS 也采用了命名空间的方法来避免重名问题，于是乎 LESS 在 mixins 的基础上扩展了一下，看下面这样一段代码：
清单 15. LESS 文件
#mynamespace {
.home {...}
.user {...}
}
这样我们就定义了一个名为 mynamespace 的命名空间，如果我们要复用 user 这个选择器的时候，我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace > .user。
嵌套的规则
在我们书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中我们可以这样写：
清单 16. HTML 片段
