firebug(firebug是谷歌瀏覽器下的一款開發插件)

更新時間:2023-03-01 14:46:31 閱讀：評論：0

原文鏈接(http://caibaojian.com/sass-less-stylus.html)

sass 、 less 和 stylus 的安裝使用和入門實踐（轉載）

剛開始的時候，說實話，我很反感使用css預處理器這種新玩意的，因為其中涉及到了編程的東西，私以為很復雜，而且考慮到項目不是一天能夠完成的，也很少是一個人完成的，對于這種團隊的項目開發，前端實踐用 css 預處理器來合作，是一種很痛苦，即使不痛苦那也是需要花費非常多的時間來協調合作上的。對于預處理器的態度，目前是本著學習新技術和推動 css 向前進的思想來學習新玩意。下面這篇文章來自w3cplus，這是一篇非常強大的文章，私以為互聯網上介紹這方面知識的就屬這篇文章是鼻祖了。經過了這篇文章的學習，我學會了安裝Sass，編譯Sass，書寫Sass，高級書寫等，Less也學習一下，打算用Sass吧。

一、什么是CSS預處器

CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為CSS增加了一些編程的特性，將CSS作為目標生成文件，然后開發者就只要使用這種語言進行編碼工作。通俗的說，CSS預處理器用一種專門的編程語言，進行Web頁面樣式設計，然后再編譯成正常的CSS文件，以供項目使用。

CSS預處理器為CSS增加一些編程的特性，無需考慮瀏覽器的兼容性問題，例如你可以在CSS中使用變量、簡單的邏輯程序、函數等等在編程語言中的一些基本特性，可以讓你的CSS更加簡潔、適應性更強、可讀性更佳，更易于代碼的維護等諸多好處。 CSS預處理器技術已經非常的成熟，而且也涌現出了很多種不同的CSS預處理器語言，比如說：Sass（SCSS）、LESS、Stylus、 Turbine、Swithch CSS、CSS Cacheer、DT CSS等。

如此之多的CSS預處理器，那么“我應該選擇哪種CSS預處理器？”也相應成了最近網上的一大熱門話題，在Linkedin、Twitter、 CSS-Trick、知呼以及各大技術論壇上，很多人為此爭論不休。相比過計我們對是否應該使用CSS預處理器的話題而言，這已經是很大的進步了。到目前為止，在眾多優秀的CSS預處理器語言中就屬Sass、LESS和Stylus最優秀，討論的也多，對比的也多。本文將分別從他們產生的背景、安裝、使用語法、異同等幾個對比之處向你介紹這三款CSS預處理器語言。相信前端開發工程師會做出自己的選擇——我要選擇哪款CSS預處理器。

二、Sass、LESS和Stylus背景介紹

為了能更好的了解這三款流行的CSS預處理器，我們先從其背景入手，簡單的了解一下各自的背景信息。

1.Sass背景介紹

Sass是對CSS（層疊樣式表）的語法的一種擴充，誕生于2007年，最早也是最成熟的一款CSS預處理器語言，它可以使用變量、常量、嵌套、混入、函數等功能，可以更有效有彈性的寫出CSS。Sass最后還是會編譯出合法的CSS讓瀏覽器使用，也就是說它本身的語法并不太容易讓瀏覽器識別，因為它不是標準的CSS格式，在它的語法內部可以使用動態變量等，所以它更像一種極簡單的動態語言。

其實現在的Sass已經有了兩套語法規則：

一個依舊是用縮進作為分隔符來區分代碼塊的；另一套規則和CSS一樣采用了大括號（｛｝）作為分隔符。后一種語法規則又名SCSS，在Sass3之后的版本都支持這種語法規則。

注：Sass官網地址：http://sass-lang.com

2.LESS的背景介紹

2009年開源的一個項目，受Sass的影響較大，但又使用CSS的語法，讓大部分開發者和設計師更容易上手。LESS提供了多種方式能平滑的將寫好的代碼轉化成標準的CSS代碼，在很多流行的框架和工具中已經能經常看到LESS的身影了（例如Twitter的Bootstrap框架就使用了 LESS）。根據維基百科上的介紹，其實LESS是Alexis Sellier受Sass的影響創建的一個開源項目。當時SASS采用了縮進作為分隔符來區分代碼塊，而不是CSS中廣為使用的大括號（｛｝）。為了讓 CSS現有的用戶使用起來更佳方便，Alexis開發了LESS并提供了類似CSS的書寫功能。注：LESS的官網：http://lesscss.org

3.Stylus背景介紹

Stylus，2010年產生，來自于Node.js社區，主要用來給Node項目進行CSS預處理支持，在此社區之內有一定支持者，在廣泛的意義上人氣還完全不如Sass和LESS。 Stylus被稱為是一種革命性的新語言，提供一個高效、動態、和使用表達方式來生成CSS，以供瀏覽器使用。Stylus同時支持縮進和CSS常規樣式書寫規則。

注：Stylus官網：http://learnboost.github.com/stylus

三、Sass、LESS和Stylus的安裝

簡單了解以后，您是否有點蠢蠢欲動，想動手一試，看看哪種預處理器適合自己的編碼習慣，或者說更適合自己的團隊成員以及項目的開發。要試，肯定有必要了解一下三者各自的安裝方法。在這一節中，主要為大家介紹三者的安裝方法，以供大家對比。

1.Sass的安裝

Sass是Ruby語言寫的，但是兩者的語法沒有關系。不懂Ruby，照樣可以正常使用Sass。只是必須先安裝Ruby，然后再安裝Sass。首先安裝Ruby，如果你使用的是IOS系統，那么你的系統已經安裝好了Ruby。如果你使用的是微軟的Windows系統，那么安裝就有些許的麻煩。不過也不用過于擔心，按照下面的步驟就能幫你快速的安裝好。到RubyInstaller官網上下載Ruby安裝文件（隨意選擇一個版本），此處選擇的是最新版本Ruby1.9.3-p385：

Ruby安裝文件下載好后，可以按應用軟件安裝步驟進行安裝Ruby。在安裝過程中，個人建議將其安裝在C盤下，在安裝過程中選擇第二個選項，如下圖所示：

Ruby安裝完成后，在開始菜單中找到新安裝的Ruby，并啟動Ruby的Command控制面板，如下圖所示：

在啟動的Ruby命令控制面板中輸入下面的命令：

gem install sass

輸入上面命令，回車后就會自動安裝Sass：

這樣Sass就安裝成功了，也就可以使用了。

2.LESS的安裝

LESS的安裝和Sass安裝有所不同，他不需要依賴于Ruby環境，就能直接安裝使用。不過LESS安裝分為兩種：客戶端和服務器端安裝。

a)客戶端安裝：

我們可以直接在客戶端使用“.less”（LESS源文件），只需要在官網載一個Javascript腳本文件主“less.js”，然后在我們需要引入LESS源文件的HTML的<head>中加入如下代碼：

<link rel="stylesheet/less" type="text/css" href="文件路徑/styles.less"><script src="文件路徑/less.js" type="text/javascript"></script>

需要注意的是：在引入“.less”文件中，“link”的“rel”屬性要設置為“stylesheet/less”。還有更重要的一點需要注意的是：源文件一定要在“less.js”引入之前引入，這樣才能保證LESS源文件正確編譯解析。

b)服務器端安裝

LESS在服務器端的使用主要是借助于LESS的編譯器，將LESS源文件編譯生成最終的CSS文件，目前常用的方式是利用node的包管理器（npm）安裝LESS，安裝成功后就可以在Node環境中對LESS文件進行編譯。如此一來，LESS在服務器的安裝和Sass的安裝有點相似，不同之處是他們需依賴的環境不一樣，LESS需要的是Node JS環境，而Sass需要的是Ruby環境，為了讓大家能更清晰的知道如何在服務器端安裝LESS，此處簡單的過一下安裝過程（本文演示的是在 Window7下的安裝方法）。首先到Node Js的官網下載一個適合Windows系統的安裝文件，此處下載的是“node-v0.8.20-x86.msi”：

安裝文件下載后，按正常應用程序方法一樣安裝。安裝完成后在開始菜單中啟用Node js的Command控制面板：

在啟動的Node Js的Command控制面板直接輸入下面的命令：

$ npm install less

這樣就安裝完 LESS 的編譯命令，可以在本地正常編譯 LESS 源文件。如果您想下載最新穩定版本的LESS，還可以嘗試在Node JS的Command控制面板輸入：

$ npm install less@latest3.Stylus的安裝

Stylus的安裝和LESS在服務器端的安裝很相似，同樣依賴于Node JS的環境，也就是說也要先安裝Node Js（如果安裝Node JS請參考前面的介紹）。唯一不同的是在Node JS的Command控制面板輸入的命令不一樣：

$ npm install stylus

然后，就會自動下載安裝最新的stylus庫：

這樣就算是安裝完Stylus了，也可以正常使用Stylus。

四、Sass、LESS和Stylus轉譯成CSS

Sass、LESS和Stylus源文件（除了LESS源文件在客戶端下運行之外）都不能直接被瀏覽器直接識別，這樣一來，要正常的使用這些源文件，就需要將其源文件轉譯成瀏覽器可以識別的CSS樣式文件，這也是使用CSS預處理器很關鍵的一步，如果這一步不知道如何操作，那么意味著寫出來的代碼不可用。接下來按同樣的方式，分別來看看三者之間是如何將其源文件轉譯成所需要的CSS樣式文件。

1.Sass源文件轉譯成CSS文件

Sass文件就是普通的文本文件，不過其文件后綴名有兩種，一種為“.sass”；另一種為“.scss”。我們一般用“.scss”就好，至于這兩種文件擴展名的區別在于“.sass”是Sass語言文件的擴展后綴名，而“.scss”是SCSS語言文件的擴展后綴名，至于Sass和SCSS的詳細區別這里不做介紹。你可以簡單的理解為他們都是CSS預處理器語言，而且兩者功能特性都一樣，只是書寫規則不同而以。要轉譯Sass文件的前提是有文件可轉，因此先在項目中創建一個Sass文件，此例中將其命名為“style.scss”，并且將其放在對應的項目樣式中，如D盤的“www/workspace/Sass/css”目錄下。啟動Ruby的Command控制面板，找到需要轉譯的Sass文件，如此例此文件放置在D盤的“www/workspace/Sass/css”目錄下：

如果僅針對于單文件的轉譯，需要將“style.scss”轉譯成“style.css”，只需要在對應的目錄下輸入下面的命令：

$ sass style.scss style.css

這樣原本在D盤的“www/workspace/Sass/css”目錄下只有“style.scss”這個文件，現在增加了一個“style.css”文件，而這個CSS文件我們就可以用來調用，他也就是“style.scss”轉譯出來的樣式文件。當然，我們不可能每保存一次這個Sass文件就來執行一回這個轉譯命令。那么有沒有更好的辦法實現呢？回答是肯定的，可以通過下面的監聽命令實現，這樣一來只要Sass文件做了修改，就會自動更新對應的CSS樣式文件。單文件的監聽，只需要在剛才的命令控制面板中輸入：

$ sass --watch style.scss:style.css

按下回車鍵（Enter）,就會看到下面的提示信息：

看到上圖所示的提示信息就表示監聽成功，這樣一來，你只要修改了“style.scss”文件，“style.css”文件就會隨著更新變化。對于一個項目而言，不太可能只有一個CSS樣式文件，如果有多個Sass文件需要監聽時，就很有必要的組織一下。默認情況之下，我喜歡把所有的 Sass文件放在“/css/sass”目錄中，而生成的CSS文件則直接放在“/css”目錄下。現在我們修改一下項目文件目錄結構，在“/css”目錄中再創建一個“sass”目錄，并找剛才創建的“style.scss”文件移至“/css/sass”目錄下。此時監聽“css/sass”下的所有Sass文件時，可以在命令面板中輸入如下格式的命令：

$ sass --watch sassFileDirectory:cssFileDirectory

在本例中，冒號前面的“sassFileDirectory”是指“/css/sass”下的“sass”目錄，冒號后面的“cssFileDirectory”是指“css”目錄，對應的命令就是：

$ sass --watch css/sass:css

回車后，同樣可以得到提示信息：

除了使用Ruby的Command控制面板轉譯Sass之外還可以考慮第三方工具，比如說有名的Compass.app和fire.app。

2.LESS文件的轉譯成CSS文件

LESS文件的轉譯和Sass文件轉譯可以說是大同小異，不同之處是LESS在安裝的Node JS環境下通過其自己的命令來進行轉譯。

$ lessc style.less

上面的命令會將編譯的CSS傳遞給stdout，你可以將它保存到一個文件中：

$ lessc style.less > style.css

除了上面的命令轉譯LESS源文件之外，現在還有很多第三方開發的工具，比較常見的有：SimpleLess、Less.app、LESS編譯輔助腳本-LESS2CSS、WinLess和CodeKit.app等，我個人現在常用的是WinLess工具，簡單易用，不過在IOS系統下 LESS.app和CodeKit.app很好用。

3.Stylus源文件轉譯成CSS文件

Stylus具有可執行性，因此Stylus能將自身轉換成CSS。Stylus可以讀取自“stdin”輸出到“stdout”，因此Stylus可以像下面轉譯源文件：

$ stylus –compress <some.styl> some.css

Stylus也像Sass一樣，同時接受單個文件和整個目錄的轉譯。例如，一個目錄名為“css”將在同一個目錄編譯并輸出“.css”文件。

$ stylus css

下面的命令將輸出到“./public/stylesheets”：

$ stylus css –out public/stylesheets

還可以同時轉譯多個文件：

$ stylus one.styl two.styl

如果你的瀏覽器安裝了Firebug，那么可以使用FireStylus擴展。

$ stylus –firebug <path>五、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特性

特性

scss

less

stylus

變量

Sass聲明變量必須是“$”開頭，后面緊跟變量名和變量值，而且變量名和變量值需要使用冒號（：）分隔開

唯一的區別就是變量名前面使用的是“@”字符

Stylus樣式中聲明變量沒有任何限定，你可以使用“$”符號開始。結尾的分號（;）可有可無，但變量名和變量值之間的等號（=）是需要的。有一點需要注意的是，如果我們使用“@”符號開頭來聲明（0.22.4）變量，Stylus會進行編譯，但其對應的值并不會賦值給變量。換句話說，在 Stylus中不要使用“@”符號開頭聲明變量。Stylus中調用變量的方法和LESS、Sass是完全相同的。

作用域

Sass中作用域在這三款預處理器是最差的，可以說在Sass中是不存在什么全局變量。

LESS中的作用域和其他程序語言中的作用域非常的相同，他首先會查找局部定義的變量，如果沒有找到，會像冒泡一樣，一級一級往下查找，直到根為止

Stylus雖然起步比較晚，但其作用域的特性和LESS一樣，可以支持全局變量和局變量。會向上冒泡查找，直到根為止。

混合

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

嵌套

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

繼承

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

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

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

運算

顏色函數

注釋

條件語句

循環語句

這三款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的變量

/*聲明變量*/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預處理器語言中變量的特性適用于定義主題（也就是我們常說的換膚），我們可以將背景顏色、字體顏色、邊框屬性等常規樣式統一定義，這樣不同的主題只需要定義不同的變量文件就可以。

2.作用域（Scope）

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。

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

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

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

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

5.繼承（Inheritance）

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

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

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

a)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: upperca;}

上面的代碼轉譯成CSS：

.block,p,ul,ol { margin: 10px 5px; padding:2px;}p { border: 1px solid #eee}ul,ol { color:#333; text-transform:upperca;}b)LESS的繼承

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

轉譯出來的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:upperca;}

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

6.運算符（Operations）

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

@ba_margin: 10px;@double_margin: @ba_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的運算是三款預處理器語言中最強大的一款，他擁有其他程序語言一樣的運算功能，簡單點的加減乘除，復雜的有關系運算、邏輯運算等。受限于篇幅，感興趣的同學可以到官網上仔細閱讀。

7.顏色函數

顏色函數是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 = #0982C1h1 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 "ret.css";@import "file.{type}";p { background: #0982C1;}

轉譯出來的CSS代碼：

@import "ret.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/el if/el

if表達式滿足（true）的時候執行后面語然塊，否則，繼續后面的el if或el。在這三款CSS3預處理器語言中都具有這種思想，只不過LESS中表達的方式略有不現，接下來我們依次看看他們具體如何使用。

Sass的條件語句

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中條件語句還可以和@el if、@el配套使用：

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

轉譯出來的CSS：

p {color:green;}Stylus的條件語句

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

box(x, y, margin = fal) padding y x if margin margin y xbody box(5px, 10px, true)

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

box(x, y, margin-only = fal) if margin-only margin y x el padding y x

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

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

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

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

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

pad(types = margin padding, n = 5px) padding unit(n, px) if padding in types margin unit(n, px) if margin in typesbody 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和el 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 from <start> through <end> {語句塊}

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

@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 <list>{語句塊}

來看個簡單的實例：

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

轉譯出來的CSS

.puma-icon { background-image: url('/images/puma.png'); }.a-slug-icon { background-image: url('/images/a-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 <val-name> [, <key-name>] in <expression>

例如：

body for num in 1 2 3 foo num

轉譯出來CSS

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

下面這個例子演示了如何使用<key-name>：

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

轉譯出來的CSS

body { foo: 0 Impact; foo: 1 Arial; foo: 2 sans-rif;}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等關鍵詞模擬這些功能，在這一方面略遜一層；

本文發布于:2023-02-28 20:04:00，感謝您對本站的認可！

本文鏈接：http://m.newhan.cn/zhishi/a/167765319075404.html

本文word下載地址：firebug(firebug是谷歌瀏覽器下的一款開發插件).doc

本文 PDF 下載地址：firebug(firebug是谷歌瀏覽器下的一款開發插件).pdf

上一篇：水銀溫度計(水銀溫度計用法)

下一篇：返回列表