Less- 動態撰寫CSS

因為手打css熟，之前就沒在碰像這樣可以把css程式化的工具，不過最近因為想玩一些新東西，所以就把Less也順便學一下。

要使用less，可以先到http://lesscss.org/下載最新版的less。

因為它可以在client端執行，所以下載後像這樣引入就可以了。
這是你編輯的less樣式
<link rel="stylesheet/less" type="text/css" href="styles.less">
這是less.js檔案
<script src="less.js" type="text/javascript"></script>

設定完成後，就可以來玩看看less了。
可以使用變數

view plaincopy to clipboardprint?

1. @color: #4D926F;   
2.   
3. #header {   
4.   color: @color;   
5. }   
6. h2 {   
7.   color: @color;   
8. }  

Compile後

view plaincopy to clipboardprint?

1. #header {   
2.   color: #4D926F;   
3. }   
4. h2 {   
5.   color: #4D926F;   
6. }  

使用別的樣式

view plaincopy to clipboardprint?

1. .rounded-corners (@radius: 5px) {   
2.   border-radius: @radius;   
3.   -webkit-border-radius: @radius;   
4.   -moz-border-radius: @radius;   
5. }   
6.   
7. #header {   
8.   .rounded-corners;   
9. }   
10. #footer {   
11.   .rounded-corners(10px);   
12. }  

compile後

view plaincopy to clipboardprint?

1. #header {   
2.   border-radius: 5px;   
3.   -webkit-border-radius: 5px;   
4.   -moz-border-radius: 5px;   
5. }   
6. #footer {   
7.   border-radius: 10px;   
8.   -webkit-border-radius: 10px;   
9.   -moz-border-radius: 10px;   
10. }  

巢狀結構

view plaincopy to clipboardprint?

1. #header {   
2.   h1 {   
3.     font-size: 26px;   
4.     font-weight: bold;   
5.   }   
6.   p { font-size: 12px;   
7.     a { text-decoration: none;   
8.       &:hover { border-width: 1px }   
9.     }   
10.   }   
11. }  

compile後

view plaincopy to clipboardprint?

1. #header h1 {   
2.   font-size: 26px;   
3.   font-weight: bold;   
4. }   
5. #header p {   
6.   font-size: 12px;   
7. }   
8. #header p a {   
9.   text-decoration: none;   
10. }   
11. #header p a:hover {   
12.   border-width: 1px;   
13. }  

程式化操作

view plaincopy to clipboardprint?

1. @the-border: 1px;   
2. @base-color: #111;   
3. @red:        #842210;   
4.   
5. #header {   
6.   color: @base-color * 3;   
7.   border-left: @the-border;   
8.   border-right: @the-border * 2;   
9. }   
10. #footer {    
11.   color: @base-color + #003300;   
12.   border-color: desaturate(@red, 10%);   
13. }  

compile後

view plaincopy to clipboardprint?

1. #header {   
2.   color: #333;   
3.   border-left: 1px;   
4.   border-right: 2px;   
5. }   
6. #footer {    
7.   color: #114411;   
8.   border-color: #7d2717;   
9. }  

看起來還蠻好玩的，只不過因為他是在client端運作，所以要考慮一下網頁的效能問題，也可以考慮把complie後的css再貼到一份新的css上，然後在把那份一起上傳到server的，另外也有server端的使用方法，有興趣也可以使用看看。