英文原文：teamtreehouse.com，編譯：w3cplus – 大漠
什麼是Sass？
Sass是一門非常優秀的CSS預處語言，他是由Hampton Catlin創立的。它可以減化CSS的工作流，使開發者更加容易開發，維護CSS樣式。
例如，你是否在特定的樣式表中查詢和替換一個十六進位制的顏色而煩惱？或者你正在尋找一個計算器為多欄佈局的寬度計算而頭痛？（不用擔心，Sass能幫你解決這樣的煩惱）。
本文將介紹Sass的一些基本概念，比如說“變數”、“混合引數”、“巢狀”和“選擇器繼承”等。
Sass和CSS非常相似，但是在Sass中是沒有花括號（｛｝）和分號（；）的。
如下面的CSS：
|
1 2 3 4 5 6 7 8 9 10 |
#skyscraper_ad { display: block; width: 120px; height: 600px; } #leaderboard_ad { display: block; width: 728px; height: 90px; } |
在Sass中，上面的CSS程式碼你要寫成下面這樣：
|
1 2 3 4 5 6 7 8 |
#skyscraper_ad display: block width: 120px height: 600px #leaderboard_ad display: block width: 728px height: 90px |
Sass使用兩個空格琮定義巢狀的區別。
你現在看過了Sass是如何書寫的，接下來我們一起看一些Sass方面的介紹，讓Sass在你手中變得不在可怕。
變數（Variables）
在Sass中定義變數，是用“$”符號宣告，然後後面跟變數名稱。在這個例子中，定義變數“red”，在變數名後使用冒號（：），然後緊跟變數值：
|
1 |
$red: #ff4848 |
Sass還內建了函式功能，例如變暗（darken）和變亮（lighten），他們可以幫助你修改變數。
在這個例子中，段落要使用一個比“h1”標籤更深的紅色，就可以這樣使用：
|
1 2 3 4 5 6 |
$red: #ff4848 $fontsize: 12px h1 color: $red p color: darken($red,10%) |
你也可以在相同的變數上做加減運算的操作。如果我們想將顏色變黑，我們也可以在變數的基礎上減一個十六進位制的顏色，例如“#101”。如果我們想把字號調大“10px”，我們也可以在字號的變數基礎上加上這個值。
|
1 2 3 |
/*加法和減法*/ color: $red - #101 font-size: $fontsize + 10px |
巢狀（Nesting）
Sass有兩種巢狀規則：
選擇器巢狀
選擇器巢狀是Sass巢狀規則中的第一種。
Sass的巢狀類似於你的HTML巢狀：
|
1 2 3 4 5 6 7 8 9 |
$fontsize: 12px .speaker .name font: weight: bold size: $fontsize + 10px .position font: size: $fontsize |
如果你看了Sass生成的CSS，你可以看到“.name”巢狀在“.speaker”內，這裡生成的CSS選擇器是“.speaker .name”。
|
1 2 3 4 5 6 7 |
.speaker .name { font-weight: bold; font-size: 22px; } .speaker .position { font-size: 12px; } |
屬性巢狀
屬性巢狀是Sass巢狀的第二種
相同字首的屬性，你可以進行巢狀：
|
1 2 3 4 5 6 7 8 9 |
$fontsize: 12px .speaker .name font: weight: bold size: $fontsize + 10px .position font: size: $fontsize |
在上面的例子中，我們有一個“font:”，在新的一行增加兩個空格放置他的屬性（通常我們看到的是使用連字元“-”來連線）。
因此我們先寫“font:”屬性，然後斷行空兩格，寫“weight:”屬性，在CSS中就變成了“font-weight:”屬性。
|
1 2 3 4 5 6 7 |
.speaker .name { font-weight: bold; font-size: 22px; } .speaker .position { font-size: 12px; } |
所有連字元的選擇器都支援。
這種巢狀用來組織你的CSS結構是非常棒的，可以讓你不在寫一些重複的程式碼。
混合（Mixins）
混合是Sass中另一個很優秀的特性。混合可以讓你定義一整塊的Sass程式碼，甚至你可以給他們定義引數，更酷的是你還可以設定預設值。
使用關鍵詞“@mixin”來定義Sass的混合，你可以你自己的喜好定義一個混合的名稱。如果你需要設定一些引數，你還可以將引數設定到這些程式碼片段中；如果你需要設定預設值，你也可以在混合的程式碼片段中設定預設值。
呼叫混合程式碼片段，可以使用Sass中的關鍵詞“@include”呼叫，並在其後面跟上你的混合程式碼片段的名稱，你還可以使用括號，在裡面設定一些引數。
來看一個簡單的例子：
|
1 2 3 4 5 6 7 8 |
@mixin border-radius($amount: 5px) -moz-border-radius: $amount -webkit-border-radius: $amount border-radius: $amount h1 @include border-radius(2px) .speaker @include border-radius |
上面的Sass程式碼將轉譯成下面的CSS程式碼：
|
1 2 3 4 5 6 7 8 9 10 |
h1 { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .speaker { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } |
我們給“h1”元素指定了一個特定的圓角值，但是並沒有給“.speaker”指定任何值，因此他將使用的是預設值“5px”。
選擇器繼承
選擇器的繼承可以讓你的選擇器繼承另一個選擇器的所有樣式風格，這是一個非常優秀的特性。
使用選擇器的繼承，要使用Sass的關鍵詞“@extend”，後而跟上你需要繼承的選擇器，那麼這個選擇器就會繼承另一個選擇器的所有樣式。（當然他們是有繼承和被繼承的關係）
|
1 2 3 4 5 |
h1 border: 4px solid #ff9aa9 .speaker @extend h1 border-width: 2px |
上面的Sass程式碼將轉譯成下面的CSS程式碼：
|
1 2 3 4 5 6 7 |
h1, .speaker { border: 4px solid #ff9aa9; } .speaker { border-width: 2px; } |
嘗試Sass
網上嘗試
如果你的本地電腦沒有安裝Sass，你可以在網上嘗試使用。
在轉譯之前，你需要選擇底部的“Indented Syntax”選項。
安裝
Sass是一個Ruby gem。如果你的本地已經安裝了Ruby gems，那麼可以在你命令終端直接執行：
|
1 |
gem install sass |
Sass也可以使用命令列工具將Sass檔案轉譯成CSS檔案。
你可以鍵入“sass –watch sass_folder:stylesheets_folder”，這個時候你的Sass檔案（副檔名必須是.sass）stylesheets_folder就會把轉譯的樣式檔案儲存在“sass_folder”目錄，當然你的sass檔案必須儲存在這個檔案目錄中。“–watch”選項的意思就是將這個目錄中的sass檔案轉譯成樣式檔案。
CSS轉換成Sass
在現有的專案中通過“sass-convert”使用sass。
在終端進入你的目錄中，鍵入“sass-convert –from css –to sass -R .”。將CSS轉換成Sass。其中“-R”表示遞迴，“.”表示當前目錄。
Scss
在這裡我們只介紹了Sass的語法，然後還有一個新的名稱叫SCSS或者Sassy CSS。不同的是SCSS看起來更像CSS，但他也像Sass一樣具有變數、混合、巢狀和選擇器繼承等特性。
總結
在你組織和管理CSS時，Sass真的很優秀。還有個專案Compass,它在CSS框架中使用混合模式，而不是去修改你的HTML結構或者重新定義你的類名。
那你還在等什麼呢？在你的下一個專案中就嘗試使用Sass吧。