CSS預先處理語言-less 的使用

標籤：編譯器   body   無限   round   numbers   bsp   raw   relative   儲存   

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類似 變數都是以@開頭，無論是定義還是使用，使用如下  ：

// 定義變數 @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 的使用