讓css做更多事情。

不管是利用lesscss 或者Sass 都是相同的概念，
他們將需要的變數設在上方，然後之後寫的css都引用同一個變數，

遇到需要修改的情況時，只需修改那個變數，就可以修改在整個css檔中，
所有引用變數的設置。這樣講有點抽象，

請看以下範例。

 

step01  第一步：
載入less.js, google上面有。
<script src=”http://lesscss.googlecode.com/files/less-1.0.18.min.js”></script>

step02 第二步：
把css檔import進來，並且設置關連tag。
<link rel=”stylesheet/less” href=”style.less”/>

注意事項：此檔必需比less.js檔先載入。
且其附檔名要改為.less而非.css喔

step03第三步：
之後你就可以自己盡情的玩啦。

設置方法如下
@basic_color:red;
/*利用@符號來設置變數*/

另一種設置的方法為
將.rounded變成一個function, (這裡面放引進的參數)
之後只需修改引進的參數值即可。
.rounded(@radius:5px)
{
  -moz-border-radius:@radius;
  -webkit-border-radius:@radius;
  border-radius:@radius;
}

 

#aaa{
background:@basic_color;
.rounded(20px);
a
    {
       .rounded(10px);
     }
     /*也可以直接將#aaa a寫在這裡面不用再額外搬到外面來寫*/
}

參考文章：
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-you-need-to-check-out-less-js/