此篇文章發(fā)布于2011年,當(dāng)時的想法與現(xiàn)在已有不同,不建議繼續(xù)閱讀。
如果你還不知道LESS CSS是什么東西,可以看一下這篇文章,是我一朋友寫給新人看的《CSS——LESS》
不可否認(rèn),LESS CSS是個強(qiáng)大的工具,它彌補(bǔ)了css沒有變量、無法運(yùn)算等一些“先天缺陷”,但它似乎給我一種錯覺,就是為了功能而實(shí)現(xiàn)功能。
比如它的引用功能
.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;
}
它似乎彌補(bǔ)上了css的一個缺陷,但我并沒發(fā)現(xiàn)他這樣做的目的是什么,我完全可以直接這樣一段
.rounded_corners{
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
然后頁面哪需要圓角,直接加上class="rounded_corners",當(dāng)然,它的引用是可以設(shè)置參數(shù)的,比如這樣
.margin10(@size:10px){
margin:@size;
}
.test{
.margin10;
}
似乎很高級的樣子,參數(shù)可以控制,減少了重復(fù)代碼的書寫,但是否實(shí)用呢?我拿之前項目里的樣式比較了下,發(fā)現(xiàn)能拎出來,通過參數(shù)設(shè)置具體樣式的幾乎沒有,只有幾個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;
}
可能會說,我定義好一個變量,在不同的地方都可以直接調(diào)用,如果要修改,只需修改一次。但問題是,萬一我只想改其中一個的樣式,另一個別動,或者就是兩個同時都需要修改。
就比如我一個頁面里有2塊廣告區(qū)域,原先寬高是一樣的,現(xiàn)在我要其中一個區(qū)域變大,另一個變小,這樣我反而覺得定義變量增多了我的工作量。
可能又會說,LESS CSS不是支持四則運(yùn)算嘛,對,我們可以這樣子
@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里的計算功能就像變量一樣讓我無法理解,別忘了,LESS CSS是要編譯過你寫的.less文件的,最終生成的還是標(biāo)準(zhǔn)的css代碼。換句話說,就是你再怎么定義變量,再怎么計算,最終它生成的還是一個固定的數(shù)值,幫我們減少的只是計算這個數(shù)值的時間,但我覺得我花時間去寫個運(yùn)算,還不如心算一下。
當(dāng)然了,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不是很適合用在項目中,它更適用于皮膚、模板等整體框架固定死的網(wǎng)站制作,比如論壇、空間。所以大家在使用LESS CSS請先考慮下這個工具是否適用,別盲目的使用,不但效率沒提高,還增加了不必要的工作量。