|
參數(shù)混入
就像在CSS中有函數(shù)功能一樣，這些對(duì)于那些在現(xiàn)在的CSS工作中多余的工作非常有用。最好和最有用的例子就是我們正在經(jīng)歷的從CSS2到CSS3過渡過程中的很多瀏覽器私有前綴。Nettuts+有一篇Jeffrey Way寫的很贊的視頻和文章，內(nèi)容是包含著由有用的參數(shù)組成的文件，他們涵蓋了大部分使用各個(gè)瀏覽器私有前綴的CSS3屬性。例如，在他們的格式中，一個(gè)簡(jiǎn)單的處理圓角的mixin是這樣的：
.border-radius( @radius: 3px ) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
在這個(gè)例子中，.border-radius有個(gè)默認(rèn)的3px的圓角，但是你可以使用你需要的任何值。.border-radius(10px)將會(huì)生成半徑為10px的圓角。
Sass中的語法很像LESS，只是使用$聲明變量，然后使用前面提到的@mixin和@include來調(diào)用。
選擇器繼承
這個(gè)東西LESS并沒有提供。通過這個(gè)功能，你可以將一個(gè)選擇器附加到已經(jīng)預(yù)先定義的選擇器上，而無需再使用逗號(hào)將兩者分開的寫法了：
.menu {
border: 1px solid #ddd;
}
.footer {
@extend .menu;
}
/* 上面的寫法規(guī)則和下面的效果是一樣的： */
.menu, .footer {
border: 1px solid #ddd;
}
嵌套規(guī)則
在css中嵌套class和ID是避免你的樣式干擾或者被別的樣式干擾的唯一方法了。但是這可能會(huì)很凌亂。使用一個(gè)類似于#site-body .post .post-header h2 的選擇器毫無吸引力而且會(huì)占用大量不必要的空格。使用LESS，你可以嵌套id、class以及標(biāo)簽。對(duì)于前面提到的例子，你可以這樣寫：
#site-body { …
.post { …
.post-header { …
h2 { … }
a { …
&:visited { … }
&:hover { … }
}
}
}
}
上面的代碼最終和上面的例子（那一長串的選擇器）的效果一樣，但是要更容易閱讀和理解的多，而且它占用很少的空間。你也可以通過&來引用元素樣式到他們的偽元素上，該功能類似于JavaScript中的this。
運(yùn)算
這可能是你所期望的：使用數(shù)字或者變量在你的樣式表中實(shí)現(xiàn)數(shù)學(xué)運(yùn)算！
@base_margin: 10px;
@double_margin: @base_margin * 2;
@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;
聲明下，我也意識(shí)到我可以除以4來獲得@quarter_page變量，但是這里我只是想要演示下圓括號(hào)組成“運(yùn)算順序”在這里也是可以用的。在使用簡(jiǎn)寫的規(guī)則中，小括號(hào)也是必須的，比如 border: (@width / 2) solid #000。
Sass在數(shù)字上比LESS更專業(yè)。它已經(jīng)可以換算單位了。Sass可以處理無法識(shí)別的度量單位并將其輸出。這個(gè)特性很明顯是一個(gè)對(duì)未來的嘗試——證明W3C作出的一些改變。
/* Sass */
2in + 3cm + 2pc = 3.514in
/* LESS */
2in + 3cm + 2pc = Error
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁 LESS介紹及其與Sass的差異 [2] 下一頁 LESS介紹及其與Sass的差異 [4]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 3 頁 LESS介紹及其與Sass的差異 [3]
