|
作用域
作用域是編程中的標(biāo)配，LESS中也是。如果你在你樣式表的root級聲明一個(gè)變量，它在整個(gè)文檔中都是可以用的。然而，如果你在一個(gè)選擇器，比如id或者class中，重新定義了這個(gè)變量，那么，它就只能在這個(gè)選擇器中可用了——當(dāng)然是重新定義后的新值。
@color: #00c; /* 藍(lán)色 */
#header {
@color: #c00; /* red */
border: 1px solid @color; /* 紅色邊框 */
}
#footer {
border: 1px solid @color; /* 藍(lán)色邊框 */
}
因?yàn)槲覀冊?header中重新定義了color變量，變量的值將會(huì)是不同的而且只會(huì)在該選擇器中有效。它之前或者之后的所有地方，如果沒有被重新定義，都會(huì)保持那個(gè)原始的值。
作用域在Sass中稍有不同。在上面的代碼中，當(dāng)@color變量變?yōu)榧t色后，代碼中，此處之后的該變量的值，將會(huì)被重寫（成為紅色）。
注釋
這一部分比較基礎(chǔ)。LESS中允許兩種注釋寫法。標(biāo)準(zhǔn)的CSS注釋，/* comment */，是有效的，而且能夠通過處理并正確輸出。當(dāng)行注釋，// comment，同樣可以用但是不能夠通過處理也不能被輸出，然后，結(jié)果是，“無聲的”。
導(dǎo)入
導(dǎo)入也相當(dāng)符合標(biāo)準(zhǔn)。標(biāo)準(zhǔn)的 @import: ‘classes.less’; 處理的很好。然而，如果你想要導(dǎo)入其它的LESS文件，那么文件的擴(kuò)展名是可選的，所以 @import ‘classes’; 也是可行的。如果你想要導(dǎo)入一些無需LESS處理的內(nèi)容，你可以使用 .css 擴(kuò)展 (比如， @import: ‘reset.css’;)。
字符串插入
字符串也是可以用于變量中的，然后通過@{name}來調(diào)用。
@base_url = 'http://www.qianduan.net</a>';
background-image: url("@{base_url}/images/background.png");
轉(zhuǎn)義(Escaping)
可能偶爾會(huì)需要引入一個(gè)CSS中非法或者LESS無法識別的值。通常是一些IE的hack。要避免拋出異常并破壞LESS，你將需要避開它們。
.class {
filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
}
/*實(shí)際上將會(huì)輸出下面的代碼: */
.class {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
}
JavaScript 賦值
這是LESS中我最中意的部分：在樣式表中使用Javascript——相當(dāng)精彩。你可以使用表達(dá)式，也可以參考環(huán)境方向來使用反單引號。
@string: `'howdy'.toUpperCase()`; /* @string 變成 'HOWDY' */
/* 你也可以使用前面提到的插值： */
@string: 'howdy';
@var: ~`'@{string}'.topUpperCase()`; /* 變?yōu)?'HOWDY' */
/* 獲取文檔的信息 */
@height = `document.body.clientHeight`;
輸出格式
然而LESS并沒有輸出設(shè)置，而Sass提供4中輸出選項(xiàng)：nested, compact, compressed 和 expanded。
結(jié)語
這兩個(gè)方法有很多共同點(diǎn)。對寫代碼的設(shè)計(jì)師來說它們都是很玄的工具，它們也可以幫助開發(fā)者更有效和快速的工作。如果你是Ruby或HAML的粉絲，那么Sass會(huì)是你的好助手。對我來說，一個(gè)PHP和JavaScript極客，我傾向于LESS，因?yàn)樗阌谝牒湍軌蚴褂肑avaScript的表達(dá)式以及文檔屬性。我懷疑我甚至接近真正理解在樣式表中編程的可能行了，但是我仍堅(jiān)持嘗試。如果你在工作中有用到它們中的一個(gè)，或者兩個(gè)都用，我很樂意聽到關(guān)于它的更多內(nèi)容，并看到你的成果。當(dāng)然，技巧、訣竅、更正一直是很歡迎的。。
譯注：翻譯的有些倉促，如果有錯(cuò)誤或者不妥的地方，歡迎指出。mixin這個(gè)單詞，這里直譯為“混入”了，不過感覺也不太合適，查了好久也沒有見到非常合適的翻譯，這里求達(dá)人指點(diǎn)。另外，不知道什么原因，lesscss.org貌似在貴國無法訪問，大家可以直接訪問LESS在git上的倉庫，http://github.com/cloudhead/less.js，該項(xiàng)目的wiki也有和官方網(wǎng)站一樣的文檔，需要的話可以詳細(xì)閱讀下。——神飛
本文鏈接：http://m.95time.cn/tech/web/2011/8577.asp 
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁 LESS介紹及其與Sass的差異 [4] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 5 頁 LESS介紹及其與Sass的差異 [5]
