[Flex]用編程的方式來寫CSS – LESS的應用（一）

詳細請看：http://s.k-zone.cn/less1
我是一個Flex開發人員，因此就無法避免與HTML、Javascript、CSS打交道。 
如果使用HTML + Javascript的話，我一般採用JQuery的方式，畢竟對於像我這樣“半吊子”的Web開發人員來說，JQuery是一個非常不錯的選擇。
但是對於CSS來說，就不是那麼方便了，只能一點一點的寫CSS。

無意中發現了一個比較有意思的應用：LESS。

那麼什麼是LESS呢？
簡言之：使用編程的方法是來寫CSS。

舉例說明：
CSS方式：
#header { color: #4D926F; } 
h2 { color: #4D926F; }

LESS方式：
@brand_color: #4D926F;
#header { color: @brand_color; } 
h2 { color: @brand_color; }

是不是很簡單？那麼LESS如何使用和安裝？

使用LESS需要有ruby的環境的支援！關於如何安裝ruby，就不是本篇文章的內容了，具體大家可以G一下：）
當安裝完ruby後，則需要安裝lessc，地址：http://s.k-zone.cn/lessdown

編譯方式： $lessc style.less style.css

LESS具有如下幾種文法，我大致翻譯一下，原文在：http://s.k-zone.cn/less

變數 （variables）
對不同地方同一個值進行變數描述，然後統一定義並且在需要的地方賦值。

CSS寫法：
#header { color: #4D926F; } 
h2 { color: #4D926F; }

LESS寫法：

@brand_color: #4D926F;
#header { color: @brand_color; } 
h2 { color: @brand_color; }
引用（mixins）
在一個類中可以引用另一個類的名稱做為該類的屬性。（在這點上與variables有些相似，只不過variables定義的變數，而mixins定義的屬性集合） CSS寫法：

#header {

  -moz-border-radius: 8px;  -webkit-border-radius: 8px;  border-radius: 8px;} #footer {  -moz-border-radius: 8px;  -webkit-border-radius: 8px;  border-radius: 8px;} LESS寫法：.rounded_corners {  -moz-border-radius: 8px;  -webkit-border-radius: 8px;  border-radius: 8px;} #header {  .rounded_corners;} #footer {  .rounded_corners;}

嵌套規則（nested rules）
將相同的內容放到一起，這樣避免CSS塊過長，不易閱讀。 CSS寫法：#header {  color: red;} #header a {  font-weight: bold;  text-decoration: none;} LESS寫法：#header {  color: red;  a {    font-weight: bold;    text-decoration: none;  }}

運算式(operations)
可以通過一些簡單的計算來設定屬性。 CSS寫法：#header {  color: #333;  border-left: 1px;  border-right: 2px;} #footer {  color: #222;} LESS寫法：@the-border: 1px;@base-color: #111; #header {  color: @base-color * 3;  border-left: @the-border;  border-right: @the-border * 2;} #footer {  color: @base-color + #111;}注釋：其中@the-border和@base-color使用了變數 （variables）方式。
使用上述四種就可以大大簡化你的CSS開發了。是不是很簡單呢？ 那麼LESS並不是萬能的，它也是具有一些缺點的，下一篇文章我將敘述一下LESS的缺點。