Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。

Less 可以運行在 Node 或瀏覽器端。

Less的編譯處理

作為一門CSS預處理語言，它並不像CSS一樣能直接使用，而是需要編譯後使用，如何編譯呢，下面分node 和瀏覽器端兩種情況解釋。

瀏覽器端：

瀏覽器端使用less，只需要做如下兩步：

1.引如Less

使用link標簽引入less，需要註意的是 rel="stylesheet/less"

<link rel="stylesheet/less"
 
 type="text/css" href="styles.less" />

2.引入less解析用的js文件

<script src="less.js" type="text/javascript"></script>

3.聲明解析，要在引入 less.js前進行聲明。

<script>

　　 less = {

　　　　env: "development",

　　　　async: false,

　　　　fileAsync: false,

　　　　poll: 1000, functions: {},

　　　　dumpLineNumbers: 
 
"comments",

　　　　relativeUrls: false, rootpath: ":/a.com/"

　　};

</script>

完事，就這麽簡單，但是 由於編譯解析less需要消耗一定的性能，且渲染也會有延遲，所有推薦使用node或其他第三方工具進行編譯後使用。

需要註意的是 js文件必須要在less文件後引入。

less.js 下載地址在這裏

node端

1. 使用npm安裝less

$ npm install -g less

2.編譯輸出

使用命令行調用less編譯器進行編譯

$ lessc styles.less

這會輸出到stdout編寫CSS。將CSS結果保存到所選擇使用的文件中

$ lessc styles.less styles.css

輸出後你可以使用編譯的style.css 啦。

less的使用方法

1.註釋

　　　less 的註釋分為兩種： /* 註釋內容 */ 和 // 註釋內容 。

/* */ 為塊註釋 可以註釋一行或多行，

// 為行註釋，只能註釋一行，而且這種註釋在編譯處理時會被編譯掉。

2.變量

　　less中很方便的一個功能就是定義變量，當css多處用到同一個值的時候，如果不用變量，那麽改動它需要改動100處，而使用變量的話，只需要修改變量的值便可以全局修改了，是不是很方便呢。

和PHP類似 [email protected]，無論是定義還是使用，使用如下 ：

// 定義變量 
@cell_width：100px；

//在使用的時候就可以這樣使用

.cell{
　　width:@cell_width;

}

3.混合

和css差別並不大，同樣使用 選擇器 後 帶大括號 的形式，牛逼的是大括號裏還可以寫 選擇器 +大括號 的形式，

在不考慮渲染優化的情況下可以無限套下去，但是考慮到瀏覽器渲染任務繁重，往往最多只套4層。

.body{
　　width:100%；
   .section{
　　　　border:1px solid #000;
　　}

}

/*
解析後的效果是下面這樣的
*/

.body{
　　width:100%；

}

.body .section{

　　　　border:1px solid #000;
　　}

除了套用，還可以引用：

.section{
　　　　border:1px solid #000;
　　}

.body{
　　width:100%；
   .section；

} /* 解析後的效果是下面這樣的 */ 

.body{
 　　width:100%；

　　border:1px solid #000;

} 

除了以上的，還能使用傳參，哈哈哈

.border_radius(@radius:5px){
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    border-radius:@radius;  
}
.cell{
    width: 100%;
    //可以不傳參數,默認用5px 
    .border_radius(10px)
}

可以說是非常靈活了，隨便套隨便引。

了解了以上的這些，就可以在實戰中使用Less進行項目開發啦！

（完）

CSS預處理語言-less 的使用