摘要：本文主要對的基本語法進行了小結，方便日后快速查閱使用。另外，因為的語法完全兼容，所以可以把原始的文件改名為后綴，即可直接導入了。為了解決這個問題，允許通過語法的形式指定每個參數的值。后記功能豐富強大，上面的語法小結只是其中的一小部分。

本文主要對 Sass 的基本語法進行了小結，方便日后快速查閱使用。

Sass 使用 $ 符號來標識變量。

$highlight-color: #abcdef;
.selected {
     border: 1px $highlight-color solid;
}

在聲明變量時，變量值也可以引用其它變量。

$highlight-color: #abcdef;
$highlight-border: 1px $highlight-color solid;
.selected {
     border: $highlight-border;
}

在一個規則塊中，既可以像普通的 CSS 那樣包含屬性，又可以嵌套其它規則塊。

#content {
     background-color: #f5f5f5;
     aside { 
         background-color: #eee; 
     }
}

一是用來解決類似 :hover 這樣的偽類選擇器，二是可以再父選擇器之前添加選擇器。

article a {
     color: blue;
     &:hover {     
         color: red; 
     }
}

#content aside {
     color: red;
     .feed & {
         color: green;
     }
}

.container h1, 
.container h2, 
.container h3 {    // css 
    margin-bottom: .8em; 
}     

.container {       // sass
     h1, h2, h3 {margin-bottom: .8em}
}

子組合選擇器和同層組合選擇器：>、+ 和 ~。

article section {     // 選擇article下的所有section選擇器元素
    margin: 5px;
}

article > section {     // 選擇article下緊跟著的子元素section選擇器元素
    border: 1px solid #ccc;
}

header + p {             // 選擇與header元素同層的p元素
    font-size: 1.1em
}

article ~ article {     // 選擇所有跟article后的同層article元素
    border-top: 1px dashed #ccc
}

article {             // sass的寫法，可以從選擇符前斷開
     ~ article { 
         border-top: 1px dashed #ccc; 
     }
     > section { 
         background: #eee; 
     }
     dl > {
          dt { 
              color: #333; 
          }
          dd { 
              color: #555; 
          }
     }
     nav + & { 
         margin-top: 0; 
     }
}

把屬性名從中劃線 - 的地方斷開，在根屬性后添加一個冒號 :，緊跟一個 {} 塊，把子屬性部分寫在這個 {} 塊中。

nav {     // sass
     border: {
          style: solid;
          width: 1px;
          color: #ccc;
     }
}

nav {     // css
     border-style: solid;
     border-width: 1px;
     border-color: #ccc;
}

nav {     // sass
     border: 1px solid #ccc {
          left: 0px;
          right: 0px;
     }
}

nav {     // css
     border: 1px solid #ccc;
     border-left: 0px;
     border-right: 0px;
}

CSS 有一個特別不常用的特性，即 @import 規則，它允許在一個 CSS 文件中導入其它 CSS 文件。然而，后果是只有執行到 @import 語句時，瀏覽器才會去下載其它 CSS 文件，這導致頁面加載起來特別慢。

Sass 也有一個 @import 規則，但不同的是，Sass 的 @import 規則在生成 CSS 文件時就把相關文件導入進來。這意味著所有相關的樣式被歸納到了同一個 CSS 文件中，而無需發起額外的下載請求。

所有在被導入文件中定義的變量和混合器均可在導入文件中使用。

使用 Sass 的 @import 規則并不需要指明被導入文件的全名，你可以省略 .sass、.scss文件后綴。

@import "colors";    // colors.scss
@import "mixins";    // mixins.scss
@import "grid";      // grid.scss

有一些專為 @import 命令而編寫的 Sass 文件，這些文件并不會編譯成對應的獨立 CSS 文件，這樣的 Sass 文件稱為 局部文件。

局部文件的文件名以下劃線開頭，如 _night-sky.scss。

當你想用 @import 導入局部文件時，可省略文件名前面的下劃線 -，如：

@import "themes/night-sky";    // themes/_night-sky.scss

如果用戶在導入你的局部文件之前聲明了變量，那么你的局部文件中的默認變量值就無效，否則就取默認值。

$fancybox-width: 400px !default;

.fancybox {
     width: $fancybox-width;
}

例如，有一個名為 _blue-theme.scss的局部文件，內容為：

aside {
     background: blue;
     color: white;
}

然后把它導入到一個CSS規則內，如下所示：

.blue-theme {
    @import "blue-theme";
}

生成的結果跟你直接在 .blue-theme 選擇器內寫_blue-theme.scss文件的內容完全一樣：

.blue-theme {
     aside {
          background: blue;
          color: #fff;
     }
}

由于 Sass 兼容原生的 CSS，所以它也只支持原生的 CSS @import，下列三種情況都生成原生的 CSS import：

被導入的文件以 .css 結尾；

被導入文件的名字是一個 URL 地址，比如：比如http://sass-lang.com/styleshe...）；

被導入文件的名字是 CSS 的 url() 值。

另外，因為 Sass 的語法完全兼容 CSS，所以可以把原始的 CSS 文件改名為 .scss 后綴，即可直接導入了。

body {
     color: #333; // 這種注釋內容不會出現在生成的css文件中（靜默注釋）
     padding: 0;  /* 這種注釋內容會出現在生成的css文件中 */
}

如果你的整個網站中有幾處小小的樣式重復（例如一樣的顏色和字體），那么使用變量來統一處理這種情況是非常不錯的選擇（小顆粒度）。但是當你的樣式變得越來越復雜，你需要大段大段的重用樣式的代碼，那么獨立的變量就沒有辦法應付這種情況，這時候你可以通過 Sass 的混合器（@mixin）來實現大段樣式的重用（大顆粒度）。

混合器使用 @mixin 標識符定義，然后通過 @include 來使用這個混合器。

@mixin rounded-corners {     // @mixin 定義
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
}

.notice {     // @include 調用
     background-color: green;
     border: 2px solid #00aa00;
     @include rounded-corners;
}

.notice {     // 最后生成
     background-color: green;
     border: 2px solid #00aa00;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
}

判斷一組屬性是否應該組合成一個混合器，一條經驗法則就是你能否為這個混合器想出一個好的名字。如果你能找到一個很好的名字來描述這些屬性修飾的樣式，比如 rounded-corners、fancy-font 或者 no-bullets，那么往往能夠構造一個合適的混合器。如果你找不到，這時候構造一個混合器可能并不合適（避免濫用）。

混合器不僅可以包含屬性，還可以包含 CSS 規則，包含選擇器和選擇器中的屬性。

@mixin no-bullets {     // @mixin 定義
     list-style: none;
     li {
          list-style-image: none;
          list-style-type: none;
          margin-left: 0px;
     }
}

ul.plain {    // @include 調用
     color: #444;
     @include no-bullets;
}

ul.plain {     // 最終生成
     color: #444;
     list-style: none;
}
ul.plain li {
     list-style-image: none;
     list-style-type: none;
     margin-left: 0px;
}

混合器并不一定總得生成相同的樣式，可以通過在調用 @include 時傳參來定制混合器生成的精確樣式（跟 JavaScript 的 function 很像）。

@mixin link-colors($normal, $hover, $visited) { // @mixin 定義
     color: $normal;
     &:hover { 
         color: $hover; 
     }
     &:visited { 
         color: $visited; 
     }
}

a {    // @include 調用
    @include link-colors {blue, red, green};
}

a { color:blue; }    // 最終生成
a:hover { color:red; }
a:visited {color:green; }

當你使用 @include 調用混合器時，有時候可能會很難區分每個參數是什么意思或者參數之間是一個怎么的順序。為了解決這個問題，Sass 允許通過語法 $name: value 的形式指定每個參數的值。這種形式的傳參，參數順序什么的就不必在乎了，只需要沒有漏掉參數即可。

a {    //  傳參
     @include link-colors(
          $normal: blue,
          $visited: green,
          $hover: red
     );
}

為了在 @include 調用混合器時不必傳入所有的參數，我們可以給參數指定一個默認值。參數默認值使用 $name: default-value 的聲明形式。默認值可以是任何有效的 CSS 屬性值，甚至是其它參數的引用。

@mixin link-colors(     // 使用默認參數值
     $normal,
     $hover: $normal,
     $visited: $normal
) {
     color: $normal;
     &:hover { color: $hover; }
     &:visited { color: $visited; }
}

sass中，選擇器繼承可以讓選擇器 繼承另一個選擇器的所有樣式，并聯合聲明。使用選擇器的繼承，要使用關鍵詞 @extend，后面緊跟需要繼承的選擇器。

h1{    // sass
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

h1,.speaker{    // css
  border: 4px solid #ff9aa9;
}
.speaker{
  border-width: 2px;
}

Sass 功能豐富、強大，上面的語法小結只是其中的一小部分。任何你想提高 CSS 代碼編寫效率的方法仿佛都能在 Sass 中找到。掌握 Sass 的使用應該成為現代前端開發的一項必備技能，尤其是那些大型的、復雜的 Web 項目。

Sass 與 Compass 實戰