Sass和Less、Stylus的轉譯和語法（1）

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

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

先在項目中建立一個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擴展 <https://github.com/LearnBoost/stylus/blob/master/docs/firebug.md>。
$ stylus –firebug <path>

5、Sass、LESS和Stylus的語法

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: #333
2.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

6、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預處理器語言中變量的特性適用於定義主題（也就是咱們常說的換膚），咱們能夠將背景顏色、字體顏色、邊框屬性等常規樣式統必定義，這樣不一樣的主題只須要定義不一樣的變量文件就能夠。

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:black;/*黑色（無全局變量概念）*/
}
示例明顯的告訴咱們，在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）
對於熟悉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: 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」的樣式將會被插入到相應的你要繼承的選擇器中，但須要注意的是優先級的問題