LESS 讓css也支援變數，運算子，include,嵌套規則等等

　　最近在網上看到1個很有意思的CSS擴充，這裡介紹給大家。LESS 最早是1個ruby的gem，用於擴充css的文法，用了LESS後，可以在css中使用變數，運算子，include,嵌套規則等等。現在LESS出了js版本，讓我們一起來看看LESS能為我們帶來什麼吧?

 

使用

   1. 下載js: http://lesscss.googlecode.com/ 最新版本好像是 1.0.22

   2. 使用less，css檔案的尾碼名需要改為.less。

   3. 在html頁面中加入下面代碼

     <!-- style.less檔案就是樣式表檔案，並且style.less必須放在less-1.0.22.min.js檔案前載入，原理後面介紹 -->

     <link rel="stylesheet/less" href="style.less" />  

     <script src="less-1.0.22.min.js"></script>

 

變數

   變數可以讓我們聲明1個常量值，並在以後多處地方進行重複使用。

 

   一般css寫法：

   .class1{      color:#ccc;      width:100px;   }      .class2{      color:#ccc;      width:120px;   }

 

   LESS寫法:

   @color1: #ccc;      .class1{      color:@color1;      width:100px;   }      .class2{      color:@color1;      width:120px;   }

inlucde    大家一定碰見過再某個規則中需要用的部分樣式跟另外1個規則樣式一樣，但沒辦法，我們只能copy過來，或者為元素指定多個class。但用了LESS後，我們不再需要這麼痛苦了。        一般css寫法：

   .red{     color:red;border:1px solid red;   }      .class2{      width:100px;font-size:12px;      /*下面的樣式跟red的一樣,copy過來的，修改就要修改2處*/      color:red;border:1px solid red;   }

 

    LESS寫法:

   .red{     color:red;border:1px solid red;   }      .class2{      width:100px;font-size:12px;      /*直接inlcude .red的規則*/      .red   }

嵌套規則:　　一般css的寫法：

   #header{color:red;}　　#header .logo{backgroud-image:url(logo.gif);}　　#header li{display:block;} 

      LESS寫法:

   #header{     color:red;     .logo{         backgroud-image:url(logo.gif);      }      li{        display:block;      }    }

運算子：　　LESS 寫法:

    @fontSize 12px;    .class1{font-size : @fontSize + 2;    }    .class2{font-size : @fontSize * 2;    }

更多其它功能:　　請見LESS官方網站：http://lesscss.org/
原理分析:　　LESS js版本的實現方式是使用ajax擷取style.less檔案，然後根據該檔案的規則產生最終瀏覽器能理解的css插入到html代碼中。所以就出現前面說過的<link rel="stylesheet/less" href="style.less" />必須在js前面。
總結:　　LESS JS版本的實現原理，是每次請求都需要通過JS去動態產生原始的css，如果css比較大的話，對於用戶端的效能影響比較大，所以個人覺的less的js版本實用性不強。　　不知道LESS 的ruby版本的實現原理是怎麼樣的，我認為如果真的覺得less方式可以提高css的開發效率，到是可以參考它的代碼實現一套java或net的原始碼，在程式啟動的時候一次根據.less檔案產生所有的css檔案，而不是每次請求都用js動態產生。

 

PS:剛剛無意間搜尋，竟然找到1個net版本的less，大家可以看看這個版本怎麼實現的：http://www.dotlesscss.com/