自從一個(gè)月前我偶然發(fā)現LESS之后我就開(kāi)始堅定的使用它了。CSS本身對我來(lái)說(shuō)從來(lái)不是問(wèn)題，但是我很好奇使用變量來(lái)沿著(zhù)一個(gè)調色盤(pán)為我的網(wǎng)站或模板創(chuàng )建一些東西的想法。擁有一個(gè)提供固定數量選項可選的色盤(pán)可以讓我避免顏色太跳躍以至于從一個(gè)已定的風(fēng)格中脫離。
事實(shí)證明，LESS——以及Sass——功能比這個(gè)要多太多。LESS和Sass在語(yǔ)法上有些共性，比如下面這些：
LESS和Sass的主要不同就是他們的實(shí)現方式，LESSS是基于JavaScript，所以，是在客戶(hù)端處理的。
另一方面，Sass是基于Ruby的，然后是在服務(wù)器端處理的。很多開(kāi)發(fā)者不會(huì )選擇LESS因為JavaScript引擎需要額外的時(shí)間來(lái)處理代碼然后輸出修改過(guò)的CSS到瀏覽器。關(guān)于這個(gè)有很多種方式，我選擇的是只在開(kāi)發(fā)環(huán)節使用LESS。一旦我完成了開(kāi)發(fā)，我就復制然后粘貼LESS輸出的到一個(gè)壓縮器，然后到一個(gè)單獨的CSS文件來(lái)替代LESS文件。另一個(gè)選擇是使用LESS.app來(lái)編譯和壓縮你的LESS文件。兩個(gè)選擇都將最小化你的樣式輸出，從而避免由于用戶(hù)的瀏覽器不支持JavaScript而可能引起的任何問(wèn)題。盡管這不大可能，但終歸是有可能的。
在你的項目中引入LESS很簡(jiǎn)單：
<link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script> |
請注意link的rel屬性。你需要在屬性值的最后面使用/less以使LESS起作用。然后在link后面引入scirpt也是必須的。如果你在用HTML5語(yǔ)法——為什么不用呢？——你可以省去type=”text/css”和type=”text/javascript”。
其實(shí)也有一個(gè)服務(wù)器端的LESS版本。在服務(wù)器上安裝LESS的最簡(jiǎn)單的辦法就是使用Node Package Manager (NPM，一看就知道是基于Node.js的)。
如果你是個(gè)開(kāi)發(fā)者，變量應該是你最好的朋友。如果你要重復的使用一個(gè)信息(本例中就是color)，將它設置為一個(gè)變量就可以。這樣，你就可以保證自己的一致性并可能減少滾動(dòng)代碼來(lái)查找顏色值、復制、粘貼等繁瑣的工作了。你甚至可以加或者減一些你需要渲染的HEX值到這些顏色上面?？聪吕樱?/p>
1 2 3 | @blue: #00c; @light_blue: @blue + #333; @dark_blue: @blue - #333; |
如果我們將這些樣式應用到3個(gè)div上面，我們就可以看到由加上和減掉的HEX值形成的漸變的效果：
關(guān)于變量在LESS和Sass中的唯一區別就是，LESS用@，Sass用$。同時(shí)還有一些作用域上的差別，我后面會(huì )提到。
偶爾，我們會(huì )創(chuàng )建一些會(huì )在樣式表中重復使用的樣式規則。沒(méi)有人會(huì )阻止你在一個(gè)HTML的元素中使用多個(gè)class，但是你可以用LESS，在樣式表中完成。為了描述這一點(diǎn)，我寫(xiě)了一點(diǎn)兒例子：
1 2 3 4 5 6 7 8 9 10 11 | .border { border-top: 1px dotted #333; } article.post { background: #eee; .border; } ul.menu { background: #ccc; .border; } |
這可以給到你與你在兩個(gè)元素中分別添加.bordered class同樣的效果——而且僅僅在樣式表中就完成了。而且它工作的很好：
在Sass中，你要在樣式規則前面添加@mixin聲明，規定它是個(gè)嵌套。然后，通過(guò)@include來(lái)調用它：
1 2 3 4 5 6 7 8 9 10 11 | @mixin border { border-top: 1px dotted #333; } article.post { background: #eee; @include border; } ul.menu { background: #ccc; @include border; } |
就像在CSS中有函數功能一樣，這些對于那些在現在的CSS工作中多余的工作非常有用。最好和最有用的例子就是我們正在經(jīng)歷的從CSS2到CSS3過(guò)渡過(guò)程中的很多瀏覽器私有前綴。Nettuts+有一篇Jeffrey Way寫(xiě)的很贊的視頻和文章，內容是包含著(zhù)由有用的參數組成的文件，他們涵蓋了大部分使用各個(gè)瀏覽器私有前綴的CSS3屬性。例如，在他們的格式中，一個(gè)簡(jiǎn)單的處理圓角的mixin是這樣的：
1 2 3 4 5 | .border-radius( @radius: 3px ) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } |
在這個(gè)例子中，.border-radius有個(gè)默認的3px的圓角，但是你可以使用你需要的任何值。.border-radius(10px)將會(huì )生成半徑為10px的圓角。
Sass中的語(yǔ)法很像LESS，只是使用$聲明變量，然后使用前面提到的@mixin和@include來(lái)調用。
這個(gè)東西LESS并沒(méi)有提供。通過(guò)這個(gè)功能，你可以將一個(gè)選擇器附加到已經(jīng)預先定義的選擇器上，而無(wú)需再使用逗號將兩者分開(kāi)的寫(xiě)法了：
1 2 3 4 5 6 7 8 9 10 11 | .menu { border: 1px solid #ddd; } .footer { @extend .menu; } /* 上面的寫(xiě)法規則和下面的效果是一樣的： */ .menu, .footer { border: 1px solid #ddd; } |
在css中嵌套class和ID是避免你的樣式干擾或者被別的樣式干擾的唯一方法了。但是這可能會(huì )很凌亂。使用一個(gè)類(lèi)似于#site-body .post .post-header h2 的選擇器毫無(wú)吸引力而且會(huì )占用大量不必要的空格。使用LESS，你可以嵌套id、class以及標簽。對于前面提到的例子，你可以這樣寫(xiě)：
1 2 3 4 5 6 7 8 9 10 11 | #site-body { … .post { … .post-header { … h2 { … } a { … &:visited { … } &:hover { … } } } } } |
上面的代碼最終和上面的例子（那一長(cháng)串的選擇器）的效果一樣，但是要更容易閱讀和理解的多，而且它占用很少的空間。你也可以通過(guò)&來(lái)引用元素樣式到他們的偽元素上，該功能類(lèi)似于JavaScript中的this。
這可能是你所期望的：使用數字或者變量在你的樣式表中實(shí)現數學(xué)運算！
1 2 3 4 5 | @base_margin: 10px; @double_margin: @base_margin * 2; @full_page: 960px; @half_page: @full_page / 2; @quarter_page: (@full_page / 2) / 2; |
聲明下，我也意識到我可以除以4來(lái)獲得@quarter_page變量，但是這里我只是想要演示下圓括號組成“運算順序”在這里也是可以用的。在使用簡(jiǎn)寫(xiě)的規則中，小括號也是必須的，比如 border: (@width / 2) solid #000。
Sass在數字上比LESS更專(zhuān)業(yè)。它已經(jīng)可以換算單位了。Sass可以處理無(wú)法識別的度量單位并將其輸出。這個(gè)特性很明顯是一個(gè)對未來(lái)的嘗試——證明W3C作出的一些改變。
1 2 3 4 5 | /* Sass */ 2in + 3cm + 2pc = 3.514in /* LESS */ 2in + 3cm + 2pc = Error |
在文章開(kāi)頭，我提到了LESS如何幫我在編碼過(guò)程中處理圍繞著(zhù)一個(gè)調色板。對此貢獻最大的一部分就是顏色函數。加入你用一個(gè)標準的藍色貫穿到你的樣式中，然后你想要在表單中用這個(gè)藍色來(lái)做一個(gè)漸變的按鈕。你可以打開(kāi)Photoshop或者其它的編輯器來(lái)獲取一個(gè)比藍色較淺的或者較暗的HEX色值來(lái)作為漸變色?；蛘?，你可以只是使用LESS中的顏色函數。
1 2 3 4 5 6 7 8 9 10 11 12 | @blue: #369; .submit { padding: 5px 10px; border: 1px solid @blue; background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); /*Moz*/ background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue, 10%)), color-stop(100%, @blue)); /*Webkit*/ background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*Opera*/ background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*IE 10+*/ background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*W3C*/ color: #fff; text-shadow: 0 -1px 1px rgba(0,0,0,0.4); } |
lighten函數很明顯就是用百分比值來(lái)減輕顏色，在這個(gè)例子中，它將減輕這個(gè)基礎的藍色的10%。這種方法可以讓我們變化的元素或者其它任何元素的顏色值——只是簡(jiǎn)單的改變基礎顏色而已。這對于主題(模板)來(lái)說(shuō)非常有用。而且，如果你使用參數功能，像上面提到的，你還可以更簡(jiǎn)單的應用到一些瀏覽器私有前綴的聲明中，比如：.linear-gradient(lighten(@blue), @blue, 100%);。
嗯，最終的效果的確很贊：
還有很多其它的色彩函數，比如變暗或者調整顏色的飽和度，甚至你可以旋轉色盤(pán)來(lái)使用其它顏色。我建議親自嘗試下你能想出的（用法）。
Sass貌似有更多的選項——但我并不需要這么多。我個(gè)人最常用的還是lighten和darken。如果你想了解更多，可以看一下這篇很詳細的介紹。
這是一個(gè)的確很贊的東東，也是另一個(gè)LESS不支持的功能。使用 Sass，你可以使用if { } else { } 條件語(yǔ)句，以及for { }循環(huán)。它甚至支持 and、 or和 not，以及 <、 >、 <=、 >= 和 == 等操作符。
1 2 3 4 5 6 7 8 9 10 11 12 13 | /* Sample Sass "if" statement */ @if lightness($color) > 30% { background-color: #000; } @else { background-color: #fff; } /* Sample Sass "for" loop */ @for $i from 1px to 10px { .border-#{i} { border: $i solid blue; } } |
名字空間可以用于組織我們的CSS到另一個(gè)檔次，我們可以將一些公用的樣式分組，然后在用的時(shí)候直接使用。例如，如果我們創(chuàng )建了一個(gè)名為default的樣式分組，我們就可以在用到的時(shí)候直接從該組中調用。
1 2 3 4 5 6 7 8 | #defaults { .nav_list () { list-style: none; margin: 0; padding: 0; } .button () { … } .quote () { … } } |
然后，在我們的代碼中，如果我們正好在一個(gè)nav元素中使用了ul元素，我們就會(huì )想到我們需要default樣式。那么我們就可以簡(jiǎn)單的調用它，它也會(huì )被直接應用。
1 2 3 | nav ul { #defaults > .nav_list; } |
作用域是編程中的標配，LESS中也是。如果你在你樣式表的root級聲明一個(gè)變量，它在整個(gè)文檔中都是可以用的。然而，如果你在一個(gè)選擇器，比如id或者class中，重新定義了這個(gè)變量，那么，它就只能在這個(gè)選擇器中可用了——當然是重新定義后的新值。
1 2 3 4 5 6 7 8 | @color: #00c; /* 藍色 */ #header { @color: #c00; /* red */ border: 1px solid @color; /* 紅色邊框 */ } #footer { border: 1px solid @color; /* 藍色邊框 */ } |
因為我們在#header中重新定義了color變量，變量的值將會(huì )是不同的而且只會(huì )在該選擇器中有效。它之前或者之后的所有地方，如果沒(méi)有被重新定義，都會(huì )保持那個(gè)原始的值。
作用域在Sass中稍有不同。在上面的代碼中，當@color變量變?yōu)榧t色后，代碼中，此處之后的該變量的值，將會(huì )被重寫(xiě)（成為紅色）。
這一部分比較基礎。LESS中允許兩種注釋寫(xiě)法。標準的CSS注釋?zhuān)?* comment */，是有效的，而且能夠通過(guò)處理并正確輸出。當行注釋?zhuān)?/ comment，同樣可以用但是不能夠通過(guò)處理也不能被輸出，然后，結果是，“無(wú)聲的”。
導入也相當符合標準。標準的 @import: ‘classes.less'; 處理的很好。然而，如果你想要導入其它的LESS文件，那么文件的擴展名是可選的，所以 @import ‘classes'; 也是可行的。如果你想要導入一些無(wú)需LESS處理的內容，你可以使用 .css 擴展 (比如， @import: ‘reset.css';)。
字符串也是可以用于變量中的，然后通過(guò)@{name}來(lái)調用。
1 2 | @base_url : 'http://www.qianduan.net'; background-image: url("@{base_url}/images/background.png"); |
可能偶爾會(huì )需要引入一個(gè)CSS中非法或者LESS無(wú)法識別的值。通常是一些IE的hack。要避免拋出異常并破壞LESS，你將需要避開(kāi)它們。
1 2 3 4 5 6 7 8 | .class { filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)"; } /*實(shí)際上將會(huì )輸出下面的代碼: */ .class { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20); } |
這是LESS中我最中意的部分：在樣式表中使用Javascript——相當精彩。你可以使用表達式，也可以參考環(huán)境方向來(lái)使用反單引號。
1 2 3 4 5 6 7 8 | @string: `'howdy'.toUpperCase()`; /* @string 變成 'HOWDY' */ /* 你也可以使用前面提到的插值： */ @string: 'howdy'; @var: ~`'@{string}'.topUpperCase()`; /* 變?yōu)?'HOWDY' */ /* 獲取文檔的信息 */ @height = `document.body.clientHeight`; |
然而LESS并沒(méi)有輸出設置，而Sass提供4中輸出選項：nested, compact, compressed 和 expanded。
這兩個(gè)方法有很多共同點(diǎn)。對寫(xiě)代碼的設計師來(lái)說(shuō)它們都是很玄的工具，它們也可以幫助開(kāi)發(fā)者更有效和快速的工作。如果你是Ruby或HAML的粉絲，那么Sass會(huì )是你的好助手。對我來(lái)說(shuō)，一個(gè)PHP和JavaScript極客，我傾向于LESS，因為它便于引入和能夠使用JavaScript的表達式以及文檔屬性。我懷疑我甚至接近真正理解在樣式表中編程的可能行了，但是我仍堅持嘗試。如果你在工作中有用到它們中的一個(gè)，或者兩個(gè)都用，我很樂(lè )意聽(tīng)到關(guān)于它的更多內容，并看到你的成果。當然，技巧、訣竅、更正一直是很歡迎的。。
譯注：翻譯的有些倉促，如果有錯誤或者不妥的地方，歡迎指出。mixin這個(gè)單詞，這里直譯為“混入”了，不過(guò)感覺(jué)也不太合適，查了好久也沒(méi)有見(jiàn)到非常合適的翻譯，這里求達人指點(diǎn)。另外，不知道什么原因，lesscss.org貌似在貴國無(wú)法訪(fǎng)問(wèn)，大家可以直接訪(fǎng)問(wèn)LESS在git上的倉庫，http://github.com/cloudhead/less.js，該項目的wiki也有和官方網(wǎng)站一樣的文檔，需要的話(huà)可以詳細閱讀下?！耧w
聯(lián)系客服
