此篇文章發(fā)布于2011年，當時(shí)的想法與現在已有不同，不建議繼續閱讀。
如果你還不知道LESS CSS是什么東西，可以看一下這篇文章，是我一朋友寫(xiě)給新人看的《CSS——LESS》
不可否認，LESS CSS是個(gè)強大的工具，它彌補了css沒(méi)有變量、無(wú)法運算等一些“先天缺陷”，但它似乎給我一種錯覺(jué)，就是為了功能而實(shí)現功能。
比如它的引用功能
.rounded_corners{
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#header{
.rounded_corners;
}
#footer{
.rounded_corners;
}
最終編譯后會(huì )生成如下代碼
.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的一個(gè)缺陷，但我并沒(méi)發(fā)現他這樣做的目的是什么，我完全可以直接這樣一段
.rounded_corners{
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
然后頁(yè)面哪需要圓角，直接加上class="rounded_corners"，當然，它的引用是可以設置參數的，比如這樣
.margin10(@size:10px){
margin:@size;
}
.test{
.margin10;
}
似乎很高級的樣子，參數可以控制，減少了重復代碼的書(shū)寫(xiě)，但是否實(shí)用呢？我拿之前項目里的樣式比較了下，發(fā)現能拎出來(lái)，通過(guò)參數設置具體樣式的幾乎沒(méi)有，只有幾個(gè)css3的屬性用這個(gè)功能還是比較OK，比如這段陰影樣式
.box-shadow(@arguments){
-webkit-box-shadow:@arguments;
-moz-box-shadow:@arguments;
box-shadow:@arguments;
}
因為只要是陰影，就少不了這三句，類(lèi)似的還有圓角、透明等，就不一一列舉了。
然后，說(shuō)說(shuō)最基本的變量吧，我就一直沒(méi)想通css要變量有什么用
@w100:100px;
@h100:100px;
div{
width:@w100;
height:@h100;
}
可能會(huì )說(shuō)，我定義好一個(gè)變量，在不同的地方都可以直接調用，如果要修改，只需修改一次。但問(wèn)題是，萬(wàn)一我只想改其中一個(gè)的樣式，另一個(gè)別動(dòng)，或者就是兩個(gè)同時(shí)都需要修改。
就比如我一個(gè)頁(yè)面里有2塊廣告區域，原先寬高是一樣的，現在我要其中一個(gè)區域變大，另一個(gè)變小，這樣我反而覺(jué)得定義變量增多了我的工作量。
可能又會(huì )說(shuō)，LESS CSS不是支持四則運算嘛，對，我們可以這樣子
@w100:100px;
@h100:100px;
div{
width:@w100 + 50px;
height:@h100 - 50px;
}
甚至還可以更2B青年一點(diǎn)
@w100:100px;
@h100:100px;
div{
width:(@w100 + 50px) / 2 + 75px;
height:@h100 - (100px / 2);
}
LESS CSS里的計算功能就像變量一樣讓我無(wú)法理解，別忘了，LESS CSS是要編譯過(guò)你寫(xiě)的.less文件的，最終生成的還是標準的css代碼。換句話(huà)說(shuō)，就是你再怎么定義變量，再怎么計算，最終它生成的還是一個(gè)固定的數值，幫我們減少的只是計算這個(gè)數值的時(shí)間，但我覺(jué)得我花時(shí)間去寫(xiě)個(gè)運算，還不如心算一下。
當然了，LESS CSS也并非一無(wú)是處，它的嵌套功能就讓我眼前一亮
<div class="test">
<div class="test1">
<div></div>
</div>
</div>
通常我們要給上面這三個(gè)div寫(xiě)樣式，無(wú)非用2種方法，一種就是定義class/id，一種就是給最外層定義個(gè)class/id，然后用繼承去寫(xiě)。而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}
}
相信這樣的樣式要查找起來(lái)，都會(huì )比較輕松，哪一層套哪一層都一清二楚，這是我感覺(jué)它很贊的功能。
總的來(lái)說(shuō)，LESS CSS不是很適合用在項目中，它更適用于皮膚、模板等整體框架固定死的網(wǎng)站制作，比如論壇、空間。所以大家在使用LESS CSS請先考慮下這個(gè)工具是否適用，別盲目的使用，不但效率沒(méi)提高，還增加了不必要的工作量。