Vue進階（幺柒捌）：延伸閱讀Sass、Scss、Less與Stylus編程特性

1.混合(Mixins)

Mixins是CSS預處理器語言中最強大的特性，簡單點來說，Mixins可以將一部分樣式抽出，作為單獨定義的模塊，被很多選擇器重復使用。平時你在寫樣式時肯定有碰到過，某段CSS樣式經常要用到多個元素中，這樣你就需要重復的寫多次。在CSS預處理器語言中，你可以為這些公用的CSS樣式定義一個Mixin，然后在你CSS需要使用這些樣式的地方直接調用你定義好的Mixin。這是一個非常有用的特性，Mixins被當作一個公認的選擇器，還可以在Mixins中定義變量或者默認參數。

Sass的混合

Sass樣式中聲明Mixins時需要使用“@mixin”，后面為Mixins的名，也可以定義參數，同時可以給這個參數設置一個默認值，但參數名是使用“$”符號開始，而且和參數值之間需要使用冒號（:）分開。

在選擇器調用定義好的Mixins需要使用“@include”，其后為你要調用的Mixins名。不過在Sass中還支持老的調用方法，就是使用加號“+”調用Mixins，在“+”后跟Mixins名。

舉個簡單的例子，比如說在你的Sass樣式中定義了一個名叫“error”的Mixin，這個“error”設置了一個參數“$borderWidth”，在無特別定義外，這個參數的默認值設置為“2px”：

/*聲明一個Mixin叫作“error”*/ @mixin error($borderWidth:2px){ border:$borderWidth solid #f00; color: #f00; } /*調用error Mixins*/ .generic-error { @include error();/*直接調用error mixins*/ } .login-error { @include error(5px);/*調用error mixins，并將參數$borderWidth的值重定義為5px*/ }

LESS的混合

在LESS中，混合是指將定義好的“ClassA”中引入另一個已經定義的“Class”，就像在當前的“Class”中增加一個屬性一樣。

不過LESS樣式中聲明Mixins和Sass聲明方法不一樣，更像CSS定義樣式，在LESS中，可以將Mixins看成是一個類選擇器，當然Mixins也可以設置參數，并給參數設置默認值。不過設置參數的變量名是使用“@”開頭，同樣參數和默認參數值之間需要使用冒號（:）分隔開。

正如Sass混合示例，同樣在LESS樣式中定義一個名叫“error”的Mixin，這個“error”設置了一個參數“@borderWidth”，在無特別定義外，這個參數的默認值是“2px”：

/*聲明一個Mixin叫作“error”*/ .error(@borderWidth:2px){ border:@borderWidth solid #f00; color: #f00; } /*調用error Mixins*/ .generic-error { .error();/*直接調用error mixins*/ } .login-error { .error(5px);/*調用error mixins，并將參數@borderWidth的值重定義為5px*/ }

Stylus的混合

Stylus中的混合和前兩款CSS預處理器語言的混合略有不同，可以不使用任何符號，就是直接聲明Mixins名，然后在定義參數和默認值之間用等號（=）來連接。

/*聲明一個Mixin叫作“error”*/ error(borderWidth=2px){ border:borderWidth solid #f00; color: #f00; } /*調用error Mixins*/ .generic-error { error();/*直接調用error mixins*/ } .login-error { error(5px);/*調用error mixins，并將參數$borderWidth的值重定義為5px*/ }

三個示例都將會轉譯成相同的CSS代碼：

.generic-error { border: 2px solid #f00; color:#f00; } .login-error { border:5px solid #f00; color: #f00; }

嵌套（Nesting）

CSS預處理器語言中的嵌套指的是：在一個選擇器中嵌套另一個選擇器來實現繼承，從而減少代碼量，并且增加了代碼的可讀性。比如說，我們在CSS中多個元素有一個相同的父元素，我們需要一遍一遍的在每個元素前寫這個父元素，那么寫樣式會變得很乏味，除非給特定的元素添加類名“class”或者ID。

section { margin:10px; } section nav { height:25px; } section nav a { color: #0982c1; } section nav a:hover { text-decoration: underline; }

相反，使用CSS預處理器語言的嵌套特性，我們可以在父元素的大括號（｛｝）里寫這些元素。同時可以使用“&”符號來引用父選擇器。對于Sass、LESS和Stylus這三款CSS預處理器語言的嵌套選擇器來說，他們都具有相同的語法：

section { margin:10px; nav { height:25px; a { color:#0982c1; &:hover { text-decoration:underline; } } } }

上面的預處理器轉譯出來的CSS代碼和我們之前開始展示的CSS代碼是相同的，非常的方便吧！

繼承（Inheritance）

對于熟悉CSS的同學來說，對于屬性的繼承并不陌生。平時在寫CSS樣式常碰到多個元素應用相同的樣式時，我們在CSS中通常都是這樣寫：

p,ul,ol{/*樣式寫在這里*/}

這樣做非常好，但往往我們需要給單獨元素添加另外的樣式，這個時候我們就需要把其中選擇器單獨出來寫樣式，如此一來我們維護樣式就相當的麻煩。為了應對這個問題，CSS預處理器語言可以從一個選擇繼承另一個選擇器下的所有樣式。

Sass和Stylus的繼承

Sass和Stylus的繼承是把一個選擇器的所有樣式繼承到另一個選擇器上。在繼承另一個選擇器的樣式時需要使用“@extend”開始，后面緊跟被繼承的選擇器：

.block { margin: 10px 5px; padding: 2px; } p { @extend .block;/*繼承.block選擇器下所有樣式*/ border: 1px solid #eee; } ul,ol { @extend .block; /*繼承.block選擇器下所有樣式*/ color: #333; text-transform: uppercase; }

上面的代碼轉譯成CSS：

.block,p,ul,ol { margin: 10px 5px; padding:2px; } p { border: 1px solid #eee } ul,ol { color:#333; text-transform:uppercase; }

LESS的繼承

LESS支持的繼承和Sass與Stylus不一樣，他不是在選擇器上繼承，而是將Mixins中的樣式嵌套到每個選擇器里面。這種方法的缺點就是在每個選擇器中會有重復的樣式產生。

.block { margin: 10px 5px; padding: 2px; } p { .block;/*繼承.block選擇器下所有樣式*/ border: 1px solid #eee; } ul,ol { .block; /*繼承.block選擇器下所有樣式*/ color: #333; text-transform: uppercase; }

轉譯出來的CSS代碼：

.block { margin: 10px 5px; padding:2px; } p { margin: 10px 5px; padding:2px; border: 1px solid #eee } ul,ol { margin: 10px 5px; padding:2px; color:#333; text-transform:uppercase; }

正如所看到的，上面的代碼“.block”的樣式將會被插入到相應的你要繼承的選擇器中，但需要注意的是優先級的問題。

運算符（Operations）

CSS預處理器語言還具有運算的特性，其簡單的講，就是對數值型的Value（如：數字、顏色、變量等）進行加減乘除四則運算。這樣的特性在CSS樣式中是想都不敢想的，但在CSS預處理器語言中對樣式做一些運算一點問題都沒有了，例如：

@base_margin: 10px; @double_margin: @base_margin * 2; @full_page: 960px; @half_page: @full_page / 2; @quarter_page: (@full_page / 2) / 2;

上面代碼是LESS的運算示例，聲明一下，在取得“@quarter_page”變量時，我們可以直接除以4，但是在這里，我們只是想演示一下圓括號組成的“運算順序”。在復合型運算中，小括號也是很有必要的，例如：

border: (@width / 2) solid #000;

Sass在數字運算上要比LESS更專業，他可以直接換算單位了。Sass可以處理無法識別的度量單位，并將其輸出。這個特性很明顯是一個對未來的嘗試——證明W3C作出的一些改變。

Stylus的運算是三款預處理器語言中最強大的一款，他擁有其他程序語言一樣的運算功能，簡單點的加減乘除，復雜的有關系運算、邏輯運算等。受限于篇幅，感興趣的同學可以到官網上仔細閱讀。

顏色函數

顏色函數是CSS預處理器語言中內置的顏色函數功能，這些功能可以對顏色進行處理，例如顏色的變亮、變暗、飽和度控制、色相控制，漸變顏色等處理十分的方便。

Sass顏色函數

lighten($color, 10%); /* 返回的顏色在$color基礎上變亮10% */ darken($color, 10%); /* 返回的顏色在$color基礎上變暗10% */ saturate($color, 10%); /* 返回的顏色在$color基礎上飽和度增加10% */ desaturate($color, 10%); /* 返回的顏色在$color基礎上飽和度減少10% */ grayscale($color); /* 返回$color的灰度色*/ complement($color); /* 返回$color的補色 */ invert($color); /* 返回$color的反相色 */ mix($color1, $color2, 50%); /* $color1 和 $color2 的 50% 混合色*/

這只是Sass中顏色函數的一個簡單列表，更多詳細的介紹可以閱讀Sass文檔。

顏色函數可以運用到任何一個元素上，只要其有顏色的屬性，下面是一個簡單的例子：

$color: #0982C1; h1 { background: $color; border: 3px solid darken($color, 50%);/*邊框顏色在$color的基礎上變暗50%*/ }

LESS顏色函數

lighten(@color, 10%); /* 返回的顏色在@color基礎上變亮10% */ darken(@color, 10%); /* 返回的顏色在@color基礎上變暗10%*/ saturate(@color, 10%); /* 返回的顏色在@color基礎上飽和度增加10% */ desaturate(@color, 10%); /* 返回的顏色在@color基礎上飽和度降低10%*/ spin(@color, 10); /* 返回的顏色在@color基礎上色調增加10 */ spin(@color, -10); /* 返回的顏色在@color基礎上色調減少10 */ mix(@color1, @color2); /* 返回的顏色是@color1和@color2兩者的混合色 */

LESS的完整顏色函數功能，請閱讀LESS文檔。

下面是LESS中如何使用一個顏色函數的簡單例子：

@color: #0982C1; h1 { background: @color; border: 3px solid darken(@color, 50%); }

Stylus的顏色函數

lighten(color, 10%); /* 返回的顏色在'color'基礎上變亮10% */ darken(color, 10%); /* 返回的顏色在'color'基礎上變暗10% */ saturate(color, 10%); /* 返回的顏色在'color'基礎上飽和度增加10% */ desaturate(color, 10%); /* 返回的顏色在'color'基礎上飽和度降低10% */

有關于Stylus的顏色函數介紹，請閱讀Stylus文檔。

下面是Stylus顏色函數的一個簡單實例：

color = #0982C1 h1 background color border 3px solid darken(color, 50%)

從上面展示的部分顏色函數可以告訴我們，Sass、LESS和Stylus都具有強大的顏色函數功能，功能特性上都大同小異，只是在使用方法上略有不同。而且他們都具有相同的一個目的，就是方便操作樣式中的顏色值。

導入（Import）

在CSS中，并不喜歡用@import來導入樣式，因為這樣的做法會增加http的請求。但是在CSS預處理器中的導入(@import)規則和CSS的有所不同，它只是在語義上導入不同的文件，但最終結果是生成一個CSS文件。

如果你是通過“@import ‘file.css’”導入“file.css”樣式文件，那效果跟普通CSS導入樣式文件一樣。

注意：導入文件中定義了變量、混合等信息也將會被引入到主樣式文件中，因此需要避免他們的相互沖突。

Sass、LESS和Stylus三款CSS預處理器語言，導入樣式的方法都是一樣：

被導入文件的樣式：

/* file.{type} */ body { background: #EEE; }

需要導入樣式的文件：

@import "reset.css"; @import "file.{type}"; p { background: #0982C1; }

轉譯出來的CSS代碼：

@import "reset.css"; body { background: #EEE; } p { background: #0982C1; }

注釋（Comment）

CSS預處理器語言中的注釋是比較基礎的一部分，這三款預處理器語言除了具有標準的CSS注釋之外，還具有單行注釋，只不過單行注釋不會被轉譯出來。

Sass、LESS和Stylus的多行注釋

多行注釋和CSS的標準注釋，他們可以輸出到CSS樣式中，但在Stylus轉譯時，只有在“compress”選項未啟用的時候才會被輸出來。

/* *我是注釋 */ body padding 5px

Sass、LESS和Stylus的單行注釋

單行注釋跟JavaScript語言中的注釋一樣，使用雙斜杠（//），但單行注釋不會輸出到CSS中。

//我是注釋 @mainColor：#369;//定義主體顏色

在Stylus中除了以上兩種注釋之外，他還有一種注釋，叫作多行緩沖注釋。這種注釋跟多行注釋類似，不同之處在于始的時候，這里是”/*！”。這個相當于告訴Stylus壓縮的時候這段無視直接輸出。

/*! *給定數值合體 */ add(a, b) a + b

上面從九個常用的特性對Sass、LESS和Stylus三款CSS預處理器語言的使用做了對比，在某些特性上可以說是一模一樣，而有一些特性上功能其實一樣，只是在部分書寫規則上有所不同。當然有些特性是完全不同。在這里主要是從使用方法上做為一個比較，主要目的是讓大家經過對比之后，使自己選擇哪一款CSS預處理器語言有所方向和幫助。

CSS預處理器的高級應用

我們知道，Sass、LESS和Stylus都具有變量、混合、嵌套、函數和作用域等特性，但這些特性都是一些普通的特性。其實除了這些特性之外，他們還擁有一些很有趣的特性有助于我們的開發，例如條件語句、循環語句等。接下來，我們同樣從使用上來對比一下這三款CSS預處理器語言在這方面應用又有何不同異同。

條件語句

說到編程，對于編程基本控制流，大家并不會感到陌生，除了循環就是條件了。條件提供了語言的可控制，否則就是純粹的靜態語言。提供的條件有導入、混合、函數以及更多。在編程語言中常見的條件語句：

if/else if/else

if表達式滿足（true）的時候執行后面語句塊，否則，繼續后面的else if或else。

在這三款CSS3預處理器語言中都具有這種思想，只不過LESS中表達的方式略有不同，接下來我們依次看看他們具體如何使用。

Sass樣式中的條件語句和其他編程語言的條件語句非常相似，在樣式中可以使用“@if”來進行判斷：

p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } @if null { border: 3px double; } }

編譯出來的CSS：

p { border: 1px solid; }

在Sass中條件語句還可以和@else if、@else配套使用：

$type: monster; p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; } }

轉譯出來的CSS：

p {color:green;}

Stylus條件語句的使用和其他編程語言的條件語句使用基本類似，不同的是他可以在樣式省略大括號（｛｝）：

box(x, y, margin = false) padding y x if margin margin y x body box(5px, 10px, true)

Stylus同樣可以和else if、else配套使用：

box(x, y, margin-only = false) if margin-only margin y x else padding y x

Stylus除了這種簡單的條件語句應用之外，他還支持后綴條件語句。這就意味著if和unless（熟悉Ruby程序語言的用戶應該都知道unless條件，其基本上與if相反，本質上是“(!(expr))”）當作操作符；當右邊表達式為真的時候執行左邊的操作對象。

例如，我們定義了negative()來執行一些基本的檢查。下面我們使用塊式條件：

negative(n) unless n is a 'unit' error('無效數值') if n < 0 yes else no

接下來，我們利用后綴條件讓我們的方法簡潔：

negative(n) error('無效數值') unless n is a 'unit' return yes if n < 0 no

當然，我們可以更進一步。如這個“n < 0 ? yes : no”可以用布爾代替：“n < 0”。后綴條件適合于大多數的單行語句。如“@import,@charset”混合書寫等。當然，下面所示的屬性也是可以的：

pad(types = margin padding, n = 5px) padding unit(n, px) if padding in types margin unit(n, px) if margin in types body pad() body pad(margin) body apply-mixins = true pad(padding, 10) if apply-mixins

上面代碼轉譯出來的CSS：

body { padding: 5px; margin: 5px; } body { margin: 5px; } body { padding: 10px; }

LESS的條件語句使用有些另類，他不是我們常見的關鍵詞if和else if之類，其實現方式是利用關鍵詞“when”。

.mixin (@a) when (@a >= 10) { background-color: black; } .mixin (@a) when (@a < 10) { background-color: white; } .class1 { .mixin(12) } .class2 { .mixin(6) }

轉譯出來的CSS：

.class1 { background-color: black; } .class2 { background-color: white; }

利用When以及<、>、=、<=、>=是十分簡單和方便的。LESS并沒有停留在這里，而且提供了很多類型檢查函數來輔助條件表達式，例如：iscolor、isnumber、isstring、iskeyword、isurl等等。

.mixin (@a) when (iscolor(@a)) { background-color: black; } .mixin (@a) when (isnumber(@a)) { background-color: white; } .class1 { .mixin(red) } .class2 { .mixin(6) }

轉譯出來的CSS

.class1 { background-color: black; } .class2 { background-color: white; }

另外，LESS的條件表達式同樣支持AND和OR以及NOT來組合條件表達式，這樣可以組織成更為強大的條件表達式。需要特別指出的一點是，OR在LESS中并不是or關鍵詞，而是用,來表示or的邏輯關系。

.smaller (@a, @b) when (@a > @b) { background-color: black; } .math (@a) when (@a > 10) and (@a < 20) { background-color: red; } .math (@a) when (@a < 10)，(@a > 20) { background-color: blue; } .math (@a) when not (@a = 10) { background-color: yellow; } .math (@a) when (@a = 10) { background-color: green; } .testSmall {.smaller(30, 10) } .testMath1 {.math(15)} .testMath2 {.math(7)} .testMath3 {.math(10)}

轉譯出來的CSS

.testSmall { background-color: black; } .testMath1 { background-color: red; background-color: yellow; } .testMath2 { background-color: blue; background-color: yellow; } .testMath3 { background-color: green; }

循環語句

Sass和Stylus還支持for循環語句，而LESS并沒支持for循環語句，但值得慶幸的是，在LESS中可以使用When來模擬出for循環的特性。

Sass中使用for循環語句需要使用@for，并且配合“from”和“through”一起使用，其基本語法：

@for $var from through {語句塊}

我們來看一個簡單的例子：

@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }

轉譯出來的CSS代碼：

.item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }

在Sass中循環語句除了@for語句之外，還有@each語句和@while語句

@each循環語法：

@each $var in {語句塊}

來看個簡單的實例：

@each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } }

轉譯出來的CSS

.puma-icon { background-image: url('/images/puma.png'); } .sea-slug-icon { background-image: url('/images/sea-slug.png'); } .egret-icon { background-image: url('/images/egret.png'); } .salamander-icon { background-image: url('/images/salamander.png') }

@while循環使用和其他編程語言類似：

$i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; }

轉譯出來的CSS

.item-6 { width: 12em; } .item-4 { width: 8em; } .item-2 { width: 4em; }

在Stylus樣式中通過for/in對表達式進行循環，形式如下：

for [, ] in

例如：

body for num in 1 2 3 foo num

轉譯出來CSS

body { foo: 1; foo: 2; foo: 3; }

下面這個例子演示了如何使用：

body fonts = Impact Arial sans-serif for font, i in fonts foo i font

轉譯出來的CSS

body { foo: 0 Impact; foo: 1 Arial; foo: 2 sans-serif; }

LESS的循環語句

在LESS語言中并沒有循環語句，可是像其條件語句一樣，通過when來模擬出他的循環功能。

.loopingClass (@index) when (@index > 0) { .myclass { z-index: @index; } // 遞歸 .loopingClass(@index - 1); } // 停止循環 .loopingClass (0) {} // 輸出 .loopingClass (3);

轉譯出的CSS

.myclass {z-index: 3;} .myclass {z-index: 2;} .myclass {z-index: 1;}

相比之下，Sass和Stylus對條件語句和循環語句的處理要比LESS語言強大。因為他們具有真正的語言處理能力。

綜上所述，我們對Sass、LESS和Stylus做一個簡單的對比總結：

三者都是開源項目；

Sass誕生是最早也是最成熟的CSS預處理器，有Ruby社區和Compass支持；Stylus早期服務器Node JS項目，在該社區得到一定支持者；LESS出現于2009年，支持者遠超于Ruby和Node JS社區；

Sass和LESS語法較為嚴謹、嚴密，而Stylus語法相對散漫，所以LESS學習起來更快一些，因為他更像CSS的標準；

Sass和LESS相互影響較大，其中Sass受LESS影響，已經進化到了全面兼容CSS的SCSS；

Sass和LESS都有第三方工具提供轉譯，特別是Sass和Compass是絕配；

Sass、LESS和Stylus都具有變量、作用域、混合、嵌套、繼承、運算符、顏色函數、導入和注釋等基本特性，而且以“變量”、“混合”、“嵌套”、“繼承”和“顏色函數”稱為五大基本特性，各自特性實現功能基本相似，只是使用規則上有所不同；

Sass和Stylus具有類似于語言處理的能力，比如說條件語句、循環語句等，而LESS需要通過When等關鍵詞模擬這些功能，在這一方面略遜一層；

上面是CSS預處理器語言中的Sass、LESS和Stylus在某些方面的對比，相對于CSS來說，上面都是CSS預處理器語言的優點？那么他有沒有缺點呢？

萬物都有陰陽兩極，有圓就有缺，CSS預處理器語言也逃避不了這個宿命。個人感覺CSS預處理器語言那是程序員的玩具，想通過編程的方式跨界解決CSS的問題。可以說CSS應該面臨的問題一個也少不了，只是增加了一個編譯過程而已，簡單來說CSS預處理器語言較CSS玩法變得更高級了，但同時降低了自己對最終代碼的控制力。更致命的是提高了門檻，首先是上手門檻，其次是維護門檻，再來是團隊整體水平和規范的門檻。這也造成了初學學習成本的昂貴。

CSS Less Sass

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。