摘要:值得慶幸的是,這三款預處理器語言的語法和語法都差不多。在這一節中,我們依次來對比一下這三款預處理器語言各種特性的異同之處,以及使用方法。預處理器語言支持任何變量例如顏色數值文本。
一、Sass、LESS和Stylus的語法
每一種語言都有自己一定的語法規則,CSS預處理器語言也不例外,在真正使用CSS預處器語言之前還有一個不可缺少的知識點,就是對語法的理解。值得慶幸的是,這三款CSS預處理器語言的語法和CSS語法都差不多。1.Sass語法
Sass3.0版本開始使用的是標準的CSS語法,和SCSS可以說是一樣的。這樣Sass代碼轉換成CSS代碼變得更容易。默認Sass使用.scss擴展名。Sass語法規則可以像CSS那樣書寫:
/*style.sass新版語法規則*/ h1{ color:#936; background-color:#333; }
正如你所看到的,在Sass樣式中,這樣的代碼是在簡單不過的了。
重要的一點是,Sass也同時支持老的語法,老的語法和常規的CSS語法略有不同,他需要嚴格的語法,任何的縮進和字符的錯誤都會造成樣式的編譯錯誤。Sass可以省略大括號({})和分號(;),完全依靠嚴格的縮進和格式化代碼,而且文件使用.sass擴展名,他的語法類似于:
/*style.sass*/ h1 color:#936 background-color: #3332.LESS語法
LESS是CSS的一種擴展形式,它并沒有閹割CSS的功能,而是在現有的CSS語法上,添加了很多額外的功能。就語法規則而言,LESS和Sass一樣,都是使用CSS的標準語法,只是LESS的源文件的擴展名是.less,其基本語法類似于:
/*style.less*/ h1 { color: #963; background-color: #333; }3.Stylus語法
Stylus的語法花樣多一些,它的文件擴展名是.styl,Stylus也接受標準的CSS語法,但是他也像Sass老的語法規則,使用縮進控制,同時Stylus也接受不帶大括號({})和分號的語法,如下所示:
/*style.styl*/ /*類似于CSS標準語法*/ h1 { color: #963; background-color:#333; } /*省略大括號({})*/ h1 color: #963; background-color: #333; /*省略大括號({})和分號(;)*/ h1 color:#963 background-color:#333
在Stylus樣式中,你也可以在同一個樣式文件中使用不同的語法規則,下面這樣的寫法也不會報錯:
/*style.styl*/ h1 { color #963 } h2 font-size:1.2em二、 Sass、LESS和Stylus特性
這三款CSS預處理器語言具有一些相同的特性,例如:變量、混入、嵌套、函數等。在這一節中,我們依次來對比一下這三款CSS預處理器語言各種特性的異同之處,以及使用方法。1.變量(Variables)
如果你是一個開發人員,變量應該是你最好朋友之一。在CSS預處理器語言中你也可以聲明變量,并在整個樣式表中使用。CSS預處理器語言支持任何變量(例如:顏色、數值、文本)。然后你可以在任意地方引用變量。
a)Sass的變量Sass聲明變量必須是“$”開頭,后面緊跟變量名和變量值,而且變量名和變量值需要使用冒號(:)分隔開。就像CSS屬性設置一樣:
/*聲明變量*/ $mainColor: #963; $siteWidth: 1024px; $borderStyle: dotted; /*調用變量*/ | /*轉譯出來的CSS*/ ------------------------------------------+------------------------------ body { | body { color: $mainColor; | color: #963; border:1px $borderStyle $mainColor; | border:1px dotted #963; max-width: $siteWidth; | max-width: 1024px; } | }b) LESS的變量
LESS樣式中聲明變量和調用變量和Sass一樣,唯一的區別就是變量名前面使用的是“@”字符:
/*聲明變量*/ @mainColor: #963; @siteWidth: 1024px; @borderStyle: dotted; /*調用變量*/ | /*轉譯出來的CSS*/ ----------------------------------------+------------------------------- body { | body { color: @mainColor; | color:#963; border:1px @borderStyle @mainColor; | border:1px dotted #963; max-width: @siteWidth; | max-width:1024px; } | }c)Stylus的變量
Stylus樣式中聲明變量沒有任何限定,你可以使用“$”符號開始。結尾的分號(;)可有可無,但變量名和變量值之間的等號(=)是需要的。有一點需要注意的是,如果我們使用“@”符號開頭來聲明(0.22.4)變量,Stylus會進行編譯,但其對應的值并不會賦值給變量。換句話說,在Stylus中不要使用“@”符號開頭聲明變量。Stylus中調用變量的方法和LESS、Sass是完全相同的。
/*聲明變量*/ mainColor = #963; siteWidth = 1024px; $borderStyle = dotted; /*調用變量*/ | /*轉譯出來的CSS*/ ----------------------------------------+-------------------------------- body | body { color mainColor | color: #963; border 1px $borderStyle mainColor | border:1px dotted #963 max-width siteWidth | max-width:1024px; | }
Stylus還有一個獨特功能,不需要分配值給變量就可以定義引用屬性:
/*水平垂直居中*/ | /*轉譯出來的CSS*/ ------------------------------------+------------------------------------ #logo | #logo { position absolute | position:absolute; top 50% | top:50%; left 50% | left:50%; width w = 150px | width:150px; height h = 80px | height:80px; margin-left -(w / 2) | margin-left:-75px; margin-top -(h / 2) | margin-top:-40px; | }
從上面的代碼中我們可以看出,CSS預處理器語言中的變量是值級別的重復使用,可以將相同的值定義成變量統一管理起來。
CSS預處理器語言中變量的特性適用于定義主題(也就是我們常說的換膚),我們可以將背景顏色、字體顏色、邊框屬性等常規樣式統一定義,這樣不同的主題只需要定義不同的變量文件就可以。
CSS預處理器語言中的變量和其他程序語言一樣,可以實現值的復用,同樣它也存在生命周期,也就是Scope(變量范圍,開發人員習慣稱之為作用域),簡單點講就是局部變量還是全局變量的概念,查找變量的順序是先在局部定義中找,如果找不到,則查找上級定義,直至全局。下面我們通過一個簡單的例子來解釋這三款CSS預處理器的作用域使用。a)Sass的作用域
Sass中作用域在這三款預處理器是最差的,可以說在Sass中是不存在什么全局變量。具體來看下面的代碼:
/*Sass樣式*/ $color: black; .scoped { $bg: blue; $color: white; color: $color; background-color:$bg; } .unscoped { color:$color; }
先看轉譯出來的CSS樣式:
.scoped { color:white;/*是白色*/ background-color:blue; } .unscoped { color:white;/*白色(無全局變量概念)*/ }
示例明顯的告訴我們,在Sass樣式中定義變量,調用變量是沒有全局變量一個概念存在,因此在Sass中定義了相同變量名時,在調用之時千萬要多加小心,不然會給你的樣式帶來錯誤。
b)LESS的作用域LESS中的作用域和其他程序語言中的作用域非常的相同,他首先會查找局部定義的變量,如果沒有找到,會像冒泡一樣,一級一級往下查找,直到根為止,同樣上面的例子,我們來看看他在LESS下所起的變化。
/*LESS樣式*/ @color: black; .scoped { @bg: blue; @color: white; color: @color; background-color:@bg; } .unscoped { color:@color; }
轉譯出來的CSS樣式:
.scoped { color:white;/*白色(調用了局部變量)*/ background-color:blue; } .unscoped { color:black;/*黑色(調用了全局變量)*/ }c)Stylus的作用域
Stylus雖然起步比較晚,但其作用域的特性和LESS一樣,可以支持全局變量和局變量。會向上冒泡查找,直到根為止。
3.混合(Mixins)Mixins是CSS預處理器中語言中最強大的特性,簡單點來說,Mixins可以將一部分樣式抽出,作為多帶帶定義的模塊,被很多選擇器重復使用。平時你在寫樣式時肯定有碰到過,某段CSS樣式經常要用到多個元素中,這樣你就需要重復的寫多次。在CSS預處理器語言中,你可以為這些公用的CSS樣式定義一個Mixin,然后在你CSS需要使用這些樣式的地方直接調用你定義好的Mixin。這是一個非常有用的特性,Mixins被當作一個公認的選擇器,還可以在Mixins中定義變量或者默認參數。a)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*/ }b)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*/ }c)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; }4.嵌套(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代碼是相同的,非常的方便吧!
5.繼承(Inheritance)a)Sass和Stylus的繼承對于熟悉CSS的同學來說,對于屬性的繼承并不陌生。平時在寫CSS樣式常碰到多個元素應用相同的樣式時,我們在CSS中通常都是這樣寫:
p,ul,ol{/*樣式寫在這里*/}這樣做非常的好,但往往我們需要給多帶帶元素添加另外的樣式,這個時候我們就需要把其中選擇器多帶帶出來寫樣式,如此一來我們維護樣式就相當的麻煩。為了應對這個問題,CSS預處理器語言可以從一個選擇繼承另個選擇器下的所有樣式。
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; }b)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”的樣式將會被插入到相應的你要繼承的選擇器中,但需要注意的是優先級的問題。
6.運算符(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預處理器語言中內置的顏色函數功能,這些功能可以對顏色進行處理,例如顏色的變亮、變暗、飽和度控制、色相控制,漸變顏色等處理十分的方便。a)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%*/ }b)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%); }c)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都具有強大的顏色函數功能,功能特性上都大同小異,只是在使用方法上略有不同。而且他們都具有相同的一個目的,就是方便操作樣式中的顏色值。
8.導入(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; }9.注釋(Comment)
CSS預處理器語言中的注釋是比較基礎的一部分,這三款預處理器語言除了具有標準的CSS注釋之外,還具有單行注釋,只不過單行注釋不會被轉譯出來。a)Sass、LESS和Stylus的多行注釋
多行注釋和CSS的標準注釋,他們可以輸出到CSS樣式中,但在Stylus轉譯時,只有在“compress”選項未啟用的時候才會被輸出來。
/* *我是注釋 */ body padding 5pxb)Sass、LESS和Stylus的單行注釋
單行注釋跟JavaScript語言中的注釋一樣,使用雙斜杠(//),但單行注釋不會輸出到CSS中。
//我是注釋 @mainColor:#369;//定義主體顏色
在Stylus中除了以上兩種注釋之外,他還有一種注釋,叫作多行緩沖注釋。這種注釋跟多行注釋類似,不同之處在于始的時候,這里是”/*!”。這個相當于告訴Stylus壓縮的時候這段無視直接輸出。
/*! *給定數值合體 */ add(a, b) a + b
上面從九個常用的特性對Sass、LESS和Stylus三款CSS預處理器語言的使用做了對比,在某些特性上可以說是一模一樣,而有一些特性上功能其實一樣,只是在部分書寫規則上有所不同。當然有些特性是完全不同。在這里幾是從使用方法上做為一個比較,主要目的是讓大家經過對比之后,使自己選擇哪一款CSS預處理器語言有所方向和幫助。
三、 CSS預處理器的高級應用我們知道,Sass、LESS和Stylus都具有變量、混合、嵌套、函數和作用域等特性,但這些特性都是一些普通的特性。其實除了這些特性之外,他們還擁有一些很有趣的特性有助于我們的開發,例如條件語句、循環語句等。接下來,我們同樣從使用上來對比一下這三款CSS預處理器語言在這方面應用又有何不同異同。a)條件語句
說到編程,對于編程基本控制流,大家并不會感到陌生,除了循環就是條件了。條件提供了語言的可控制,否則就是純粹的靜態語言。提供的條件有導入、混合、函數以及更多。在編程語言中常見的條件語句:
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的條件語句
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的條件語句
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; }b)循環語句
Sass和Stylus還支持for循環語句,而LESS并沒支持for循環語句,但值得慶幸的是,在LESS中可以使用When來模擬出for循環的特性。Sass的循環語句
Sass中使用for循環語句需要使用@for,并且配合“from”和“through”一起使用,其基本語法:
@for $var fromthrough {語句塊}
我們來看一個簡單的例子:
@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的循環語句
在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等關鍵詞模擬這些功能,在這一方面略遜一層;
如果你覺得這篇文章對你有所幫助,那就順便點個贊吧,點點關注不迷路~
黑芝麻哇,白芝麻發,黑芝麻白芝麻哇發哈!
前端哇發哈
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/117355.html
摘要:使用預編譯處理的優勢使用預處理器,可以提供缺失的樣式層復用機制減少冗余代碼,提高樣式代碼的可維護性。所以我們在實際項目中衡量預編譯方案時,還是得想想,比起帶來的額外維護開銷,預處理器有沒有解決更大的麻煩。 一、什么是css預編譯處理? CSS 預編譯處理,從字面上理解,就是預先編譯處理CSS。它擴展了 CSS 語言,增加了變量、Mixin、函數等編程的特性,使 CSS 更易維護和擴展。...
摘要:上面的命令會將編譯的傳遞給,你可以將它保存到一個文件中除了上面的命令轉譯源文件之外,現在還有很多第三方開發的工具,例如是一個前端預處理器語言圖形編譯工具,支持,幫助開發者更高效地使用它們進行開發。 一、Sass、LESS和Stylus的安裝 1.Sass的安裝 Sass是Ruby語言寫的,但是兩者的語法沒有關系。不懂Ruby,照樣可以正常使用Sass。只是必須先安裝Ruby,然后再安裝...
摘要:變量聲明和調用這是的編程元素基礎之一。如下在最外層聲明的是全局變量,全局范圍內可以調用,在中聲明的是的局部變量,只在內部內進行調用。生成的如下上面的內容就是的基礎篇,進階篇的話會整理一下函數和方法規則相關的東西。 sass起源和簡介 css 其實不是一門編程語言, css 全稱 Cascading Style Sheets (層疊樣式表)是一種用來表現HTML(標準通用標記語言的一個應...
摘要:前言本文基于,主要涉及基本概念基本配置和實際項目打包優化。關于概念方面參考官網,常用配置來自于網絡資源,在文末有相關參考鏈接,實踐部分基于自己的項目進行優化配置。同一文件中,修改某個影響其他。 前言:本文基于weboack4.x,主要涉及webpack4 基本概念、基本配置和實際項目打包優化。關于概念方面參考官網,常用配置來自于網絡資源,在文末有相關參考鏈接,實踐部分基于自己的項目進行...
摘要:先展示一下文件目錄結構先把相關的依賴給裝好注意一下注釋只是為了解釋,在中不能寫注釋插件加載器預編譯語法跨平臺環境用來設置命令行安裝預編譯語法的配置中的對象,用于處理目錄的對象,提高開發效率。 Foreword 之前三篇大致介紹了webpack的用法,正如這個系列標題而言 從webpack 到 vue Component,所以最后一篇文章當然是要講 component, 不對應該說是結合...
閱讀 888·2021-09-22 15:17
閱讀 1917·2021-09-22 15:06
閱讀 2211·2021-09-08 09:35
閱讀 5099·2021-09-01 11:43
閱讀 3476·2019-08-30 15:55
閱讀 2150·2019-08-30 12:48
閱讀 3149·2019-08-30 12:45
閱讀 1782·2019-08-29 17:31