不要盲目的在項目中使用LESS CSS

　　如果你還不知道LESS CSS是什麼東西，可以看一下這篇文章，是我一朋友寫給新人看的《CSS——LESS》

　　不可否認，LESS CSS是個強大的工具，它彌補了css沒有變數、無法運算等一些“先天缺陷”，但它似乎給我一種錯覺，就是為了功能而實現功能。

　　比如它的引用功能

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

　　最終編譯後會產生如下代碼

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

　　它似乎彌補上了css的一個缺陷，但我並沒發現他這樣做的目的是什麼，我完全可以直接這樣一段

.rounded_corners{-moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;}

　　然後頁面哪需要圓角，直接加上class="rounded_corners"，當然，它的引用是可以設定參數的，比如這樣

.margin10(@size:10px){margin:@size;}.test{.margin10;}

　　似乎很進階的樣子，參數可以控制，減少了重複代碼的書寫，但是否實用呢？我拿之前項目裡的樣式比較了下，發現能拎出來，通過參數設定具體樣式的幾乎沒有，只有幾個css3的屬性用這個功能還是比較OK，比如這段陰影樣式

.box-shadow(@arguments){-webkit-box-shadow:@arguments;-moz-box-shadow:@arguments;box-shadow:@arguments;}

　　因為只要是陰影，就少不了這三句，類似的還有圓角、透明等，就不一一列舉了。

　　然後，說說最基本的變數吧，我就一直沒想通css要變數有什麼用

@w100:100px;@h100:100px;div{width:@w100;height:@h100;}

　　可能會說，我定義好一個變數，在不同的地方都可以直接調用，如果要修改，只需修改一次。但問題是，萬一我只想改其中一個的樣式，另一個別動，或者就是兩個同時都需要修改。

　　就比如我一個頁面裡有2塊廣告地區，原先寬高是一樣的，現在我要其中一個地區變大，另一個變小，這樣我反而覺得定義變數增多了我的工作量。

　　可能又會說，LESS CSS不是支援四則運算嘛，對，我們可以這樣子

@w100:100px;@h100:100px;div{width:@w100 + 50px;height:@h100 - 50px;}

　　甚至還可以更2B青年一點

@w100:100px;@h100:100px;div{width:(@w100 + 50px) / 2 + 75px;height:@h100 - (100px / 2);}

　　LESS CSS裡的計算功能就像變數一樣讓我無法理解，別忘了，LESS CSS是要編譯過你寫的.less檔案的，最終產生的還是標準的css代碼。換句話說，就是你再怎麼定義變數，再怎麼計算，最終它產生的還是一個固定的數值，幫我們減少的只是計算這個數值的時間，但我覺得我花時間去寫個運算，還不如心算一下。

　　當然了，LESS CSS也並非一無是處，它的嵌套功能就讓我眼前一亮

<div class="test"><div class="test1"><div></div></div></div>

　　通常我們要給上面這三個div寫樣式，無非用2種方法，一種就是定義class/id，一種就是給最外層定義個class/id，然後用繼承去寫。而LESS CSS給了我們一種友好閱讀的方式

.test{.margin10;@color:#4d926f;width:@w100 + 100px;height:100px;border:1px solid red;background:@color;&:hover,&.selected{background-color:#FFF}/*嵌套*/.test1{width:@w100 - 50px;height:100px;background-color:red;font-size:20px;/*多重嵌套*/div{width:100%;height:50px;background-color:#9F0;}}.test1:hover{background-color:@color}}

　　相信這樣的樣式要尋找起來，都會比較輕鬆，哪一層套哪一層都一清二楚，這是我感覺它很贊的功能。

　　總的來說，LESS CSS不是很適合用在項目中，它更適用於皮膚、模板等整體架構固定死的網站製作，比如論壇、空間。所以大家在使用LESS CSS請先考慮下這個工具是否適用，別盲目的使用，不但效率沒提高，還增加了不必要的工作量。