工作中用到了Bootstrap,涉及到了LESS,對其做了一個簡單的了解,CSS的預處理器使用最廣泛的就是LESS和Sass,都是努力把CSS武裝成為開發語言,讓它從簡單的描述性語言過渡到具有程式式特性的語言,主要的特性就是:變量、Mixins、嵌套、繼承等。就像教程裡說的:CSS的預處理器就是讓CSS從設計師的工具,變為開發人員的工具。但是看完之後覺得,作為對CSS研究尚不透徹的前端小生,我最好還是不要高攀,況且在我目前的項目中拿LESS來寫CSS有點兒殺雞用牛刀的感覺。但回過頭來說,技不壓身。。。bulabulabula~~好了,且正題,摘了一篇非常不錯的幹貨,分享給大家:非常明晰地介紹一下LESS和Sass的基本特性他們的差別。
事實證明,LESS——以及Sass——功能比這個要多太多。LESS和Sass在文法上有些共性,比如下面這些:
● 混入(Mixins)——class中的class;
● 參數混入——可以傳遞參數的class,就像函數一樣;
● 嵌套規則——Class中嵌套class,進而減少重複的代碼;
● 運算——CSS中用上數學;
● 顔色功能——可以編輯顔色;
● 名字空間(namespace)——分組樣式,進而可以被調用;
● 作用域——局部修改樣式;
● JavaScript 指派——在CSS中使用JavaScript表達式指派。
LESS和Sass的主要不同就是他們的實作方式,LESSS是基于JavaScript,是以,是在用戶端處理的。
另一方面,Sass是基于Ruby的,然後是在伺服器端處理的。很多開發者不會選擇LESS因為JavaScript引擎需要額外的時間來處理代碼然後輸出修改過的CSS到浏覽器。關于這個有很多種方式,我選擇的是隻在開發環節使用LESS。一旦我完成了開發,我就複制然後粘貼LESS輸出的到一個壓縮器,然後到一個單獨的CSS檔案來替代LESS檔案。另一個選擇是使用LESS.app來編譯和壓縮你的LESS檔案。兩個選擇都将最小化你的樣式輸出,進而避免由于使用者的浏覽器不支援JavaScript而可能引起的任何問題。盡管這不大可能,但終歸是有可能的。
LESS Is More
介紹
在你的項目中引入LESS很簡單:
1.下載下傳less.js;
2.建立一個檔案來放你的樣式,比如style.less;
3.添加以下代碼到你的HTML的<head>中:
1 2 | |
請注意link的rel屬性。你需要在屬性值的最後面使用/less以使LESS起作用。然後在link後面引入scirpt也是必須的。如果你在用HTML5文法——為什麼不用呢?——你可以省去type=”text/css”和type=”text/javascript”。
其實也有一個伺服器端的LESS版本。在伺服器上安裝LESS的最簡單的辦法就是使用Node Package Manager (NPM,一看就知道是基于Node.js的)。
變量
如果你是個開發者,變量應該是你最好的朋友。如果你要重複的使用一個資訊(本例中就是color),将它設定為一個變量就可以。這樣,你就可以保證自己的一緻性并可能減少滾動代碼來查找顔色值、複制、粘貼等繁瑣的工作了。你甚至可以加或者減一些你需要渲染的HEX值到這些顔色上面。看下例子:
3 | |
如果我們将這些樣式應用到3個div上面,我們就可以看到由加上和減掉的HEX值形成的漸變的效果:
從@light_blue到@blue到@dark_blue的漸變效果
關于變量在LESS和Sass中的唯一差別就是,LESS用@,Sass用$。同時還有一些作用域上的差别,我後面會提到。
混入(mixin)
偶爾,我們會建立一些會在樣式表中重複使用的樣式規則。沒有人會阻止你在一個HTML的元素中使用多個class,但是你可以用LESS,在樣式表中完成。為了描述這一點,我寫了一點兒例子:
4 5 6 7 8 9 10 11 | |
這可以給到你與你在兩個元素中分别添加.bordered class同樣的效果——而且僅僅在樣式表中就完成了。而且它工作的很好:
文字和無序清單都被用上了邊框樣式
在Sass中,你要在樣式規則前面添加@mixin聲明,規定它是個嵌套。然後,通過@include來調用它:
|
參數混入
就像在CSS中有函數功能一樣,這些對于那些在現在的CSS工作中多餘的工作非常有用。最好和最有用的例子就是我們正在經曆的從CSS2到CSS3過渡過程中的很多浏覽器私有字首。Nettuts+有一篇Jeffrey Way寫的很贊的視訊和文章,内容是包含着由有用的參數組成的檔案,他們涵蓋了大部分使用各個浏覽器私有字首的CSS3屬性。例如,在他們的格式中,一個簡單的處理圓角的mixin是這樣的:
|
在這個例子中,.border-radius有個預設的3px的圓角,但是你可以使用你需要的任何值。.border-radius(10px)将會生成半徑為10px的圓角。
Sass中的文法很像LESS,隻是使用$聲明變量,然後使用前面提到的@mixin和@include來調用。
選擇器繼承
這個東西LESS并沒有提供。通過這個功能,你可以将一個選擇器附加到已經預先定義的選擇器上,而無需再使用逗号将兩者分開的寫法了:
|
嵌套規則
在css中嵌套class和ID是避免你的樣式幹擾或者被别的樣式幹擾的唯一方法了。但是這可能會很淩亂。使用一個類似于#site-body .post .post-header h2 的選擇器毫無吸引力而且會占用大量不必要的空格。使用LESS,你可以嵌套id、class以及标簽。對于前面提到的例子,你可以這樣寫:
|
上面的代碼最終和上面的例子(那一長串的選擇器)的效果一樣,但是要更容易閱讀和了解的多,而且它占用很少的空間。你也可以通過&來引用元素樣式到他們的僞元素上,該功能類似于JavaScript中的this。
運算
這可能是你所期望的:使用數字或者變量在你的樣式表中實作數學運算!
|
聲明下,我也意識到我可以除以4來獲得@quarter_page變量,但是這裡我隻是想要示範下圓括号組成“運算順序”在這裡也是可以用的。在使用簡寫的規則中,小括号也是必須的,比如 border: (@width / 2) solid #000。
Sass在數字上比LESS更專業。它已經可以換算機關了。Sass可以處理無法識别的度量機關并将其輸出。這個特性很明顯是一個對未來的嘗試——證明W3C作出的一些改變。
|
Color函數
在文章開頭,我提到了LESS如何幫我在編碼過程中處理圍繞着一個調色闆。對此貢獻最大的一部分就是顔色函數。加入你用一個标準的藍色貫穿到你的樣式中,然後你想要在表單中用這個藍色來做一個漸變的按鈕。你可以打開Photoshop或者其它的編輯器來擷取一個比藍色較淺的或者較暗的HEX色值來作為漸變色。或者,你可以隻是使用LESS中的顔色函數。
12 | |
lighten函數很明顯就是用百分比值來減輕顔色,在這個例子中,它将減輕這個基礎的藍色的10%。這種方法可以讓我們變化的元素或者其它任何元素的顔色值——隻是簡單的改變基礎顔色而已。這對于主題(模闆)來說非常有用。而且,如果你使用參數功能,像上面提到的,你還可以更簡單的應用到一些浏覽器私有字首的聲明中,比如:.linear-gradient(lighten(@blue), @blue, 100%);。
嗯,最終的效果的确很贊:
很贊的漸變的、基于變量的”Submit”按鈕
還有很多其它的色彩函數,比如變暗或者調整顔色的飽和度,甚至你可以旋轉色盤來使用其它顔色。我建議親自嘗試下你能想出的(用法)。
Sass貌似有更多的選項——但我并不需要這麼多。我個人最常用的還是lighten和darken。如果你想了解更多,可以看一下這篇很詳細的介紹。
條件語句與控制
這是一個的确很贊的東東,也是另一個LESS不支援的功能。使用 Sass,你可以使用if { } else { } 條件語句,以及for { }循環。它甚至支援 and、 or和 not,以及 <、 >、 <=、 >= 和 == 等操作符。
13 | |
名字空間(Namespaces)
名字空間可以用于組織我們的CSS到另一個檔次,我們可以将一些公用的樣式分組,然後在用的時候直接使用。例如,如果我們建立了一個名為default的樣式分組,我們就可以在用到的時候直接從該組中調用。
|
然後,在我們的代碼中,如果我們正好在一個nav元素中使用了ul元素,我們就會想到我們需要default樣式。那麼我們就可以簡單的調用它,它也會被直接應用。
|
作用域
作用域是程式設計中的标配,LESS中也是。如果你在你樣式表的root級聲明一個變量,它在整個文檔中都是可以用的。然而,如果你在一個選擇器,比如id或者class中,重新定義了這個變量,那麼,它就隻能在這個選擇器中可用了——當然是重新定義後的新值。
|
因為我們在#header中重新定義了color變量,變量的值将會是不同的而且隻會在該選擇器中有效。它之前或者之後的所有地方,如果沒有被重新定義,都會保持那個原始的值。
作用域在Sass中稍有不同。在上面的代碼中,當@color變量變為紅色後,代碼中,此處之後的該變量的值,将會被重寫(成為紅色)。
注釋
這一部分比較基礎。LESS中允許兩種注釋寫法。标準的CSS注釋,/* comment */,是有效的,而且能夠通過處理并正确輸出。當行注釋,// comment,同樣可以用但是不能夠通過處理也不能被輸出,然後,結果是,“無聲的”。
導入
導入也相當符合标準。标準的 @import: ‘classes.less’; 處理的很好。然而,如果你想要導入其它的LESS檔案,那麼檔案的擴充名是可選的,是以 @import ‘classes’; 也是可行的。如果你想要導入一些無需LESS處理的内容,你可以使用 .css 擴充 (比如, @import: ‘reset.css’;)。
字元串插入
字元串也是可以用于變量中的,然後通過@{name}來調用。
|
轉義(Escaping)
可能偶爾會需要引入一個CSS中非法或者LESS無法識别的值。通常是一些IE的hack。要避免抛出異常并破壞LESS,你将需要避開它們。
|
JavaScript 指派
這是LESS中我最中意的部分:在樣式表中使用Javascript——相當精彩。你可以使用表達式,也可以參考環境方向來使用反單引号。
|
輸出格式
然而LESS并沒有輸出設定,而Sass提供4中輸出選項:nested, compact, compressed 和 expanded。