摘要：本文主要對(duì)的基本語(yǔ)法進(jìn)行了小結(jié)，方便日后快速查閱使用。另外，因?yàn)榈恼Z(yǔ)法完全兼容，所以可以把原始的文件改名為后綴，即可直接導(dǎo)入了。為了解決這個(gè)問(wèn)題，允許通過(guò)語(yǔ)法的形式指定每個(gè)參數(shù)的值。后記功能豐富強(qiáng)大，上面的語(yǔ)法小結(jié)只是其中的一小部分。

本文主要對(duì) Sass 的基本語(yǔ)法進(jìn)行了小結(jié)，方便日后快速查閱使用。

Sass 使用 $ 符號(hào)來(lái)標(biāo)識(shí)變量。

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

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

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

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

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

一是用來(lái)解決類似 :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的寫(xiě)法，可以從選擇符前斷開(kāi)
     ~ article { 
         border-top: 1px dashed #ccc; 
     }
     > section { 
         background: #eee; 
     }
     dl > {
          dt { 
              color: #333; 
          }
          dd { 
              color: #555; 
          }
     }
     nav + & { 
         margin-top: 0; 
     }
}

把屬性名從中劃線 - 的地方斷開(kāi)，在根屬性后添加一個(gè)冒號(hào) :，緊跟一個(gè) {} 塊，把子屬性部分寫(xiě)在這個(gè) {} 塊中。

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 有一個(gè)特別不常用的特性，即 @import 規(guī)則，它允許在一個(gè) CSS 文件中導(dǎo)入其它 CSS 文件。然而，后果是只有執(zhí)行到 @import 語(yǔ)句時(shí)，瀏覽器才會(huì)去下載其它 CSS 文件，這導(dǎo)致頁(yè)面加載起來(lái)特別慢。

Sass 也有一個(gè) @import 規(guī)則，但不同的是，Sass 的 @import 規(guī)則在生成 CSS 文件時(shí)就把相關(guān)文件導(dǎo)入進(jìn)來(lái)。這意味著所有相關(guān)的樣式被歸納到了同一個(gè) CSS 文件中，而無(wú)需發(fā)起額外的下載請(qǐng)求。

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

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

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

有一些專為 @import 命令而編寫(xiě)的 Sass 文件，這些文件并不會(huì)編譯成對(duì)應(yīng)的獨(dú)立 CSS 文件，這樣的 Sass 文件稱為 局部文件。

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

當(dāng)你想用 @import 導(dǎo)入局部文件時(shí)，可省略文件名前面的下劃線 -，如：

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

如果用戶在導(dǎo)入你的局部文件之前聲明了變量，那么你的局部文件中的默認(rèn)變量值就無(wú)效，否則就取默認(rèn)值。

$fancybox-width: 400px !default;

.fancybox {
     width: $fancybox-width;
}

例如，有一個(gè)名為 _blue-theme.scss的局部文件，內(nèi)容為：

aside {
     background: blue;
     color: white;
}

然后把它導(dǎo)入到一個(gè)CSS規(guī)則內(nèi)，如下所示：

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

生成的結(jié)果跟你直接在 .blue-theme 選擇器內(nèi)寫(xiě)_blue-theme.scss文件的內(nèi)容完全一樣：

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

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

被導(dǎo)入的文件以 .css 結(jié)尾；

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

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

另外，因?yàn)?Sass 的語(yǔ)法完全兼容 CSS，所以可以把原始的 CSS 文件改名為 .scss 后綴，即可直接導(dǎo)入了。

body {
     color: #333; // 這種注釋內(nèi)容不會(huì)出現(xiàn)在生成的css文件中（靜默注釋）
     padding: 0;  /* 這種注釋內(nèi)容會(huì)出現(xiàn)在生成的css文件中 */
}

如果你的整個(gè)網(wǎng)站中有幾處小小的樣式重復(fù)（例如一樣的顏色和字體），那么使用變量來(lái)統(tǒng)一處理這種情況是非常不錯(cuò)的選擇（小顆粒度）。但是當(dāng)你的樣式變得越來(lái)越復(fù)雜，你需要大段大段的重用樣式的代碼，那么獨(dú)立的變量就沒(méi)有辦法應(yīng)付這種情況，這時(shí)候你可以通過(guò) Sass 的混合器（@mixin）來(lái)實(shí)現(xiàn)大段樣式的重用（大顆粒度）。

混合器使用 @mixin 標(biāo)識(shí)符定義，然后通過(guò) @include 來(lái)使用這個(gè)混合器。

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

.notice {     // @include 調(diào)用
     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;
}

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

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

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

ul.plain {    // @include 調(diào)用
     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;
}

混合器并不一定總得生成相同的樣式，可以通過(guò)在調(diào)用 @include 時(shí)傳參來(lái)定制混合器生成的精確樣式（跟 JavaScript 的 function 很像）。

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

a {    // @include 調(diào)用
    @include link-colors {blue, red, green};
}

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

當(dāng)你使用 @include 調(diào)用混合器時(shí)，有時(shí)候可能會(huì)很難區(qū)分每個(gè)參數(shù)是什么意思或者參數(shù)之間是一個(gè)怎么的順序。為了解決這個(gè)問(wèn)題，Sass 允許通過(guò)語(yǔ)法 $name: value 的形式指定每個(gè)參數(shù)的值。這種形式的傳參，參數(shù)順序什么的就不必在乎了，只需要沒(méi)有漏掉參數(shù)即可。

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

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

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

sass中，選擇器繼承可以讓選擇器 繼承另一個(gè)選擇器的所有樣式，并聯(lián)合聲明。使用選擇器的繼承，要使用關(guān)鍵詞 @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 功能豐富、強(qiáng)大，上面的語(yǔ)法小結(jié)只是其中的一小部分。任何你想提高 CSS 代碼編寫(xiě)效率的方法仿佛都能在 Sass 中找到。掌握 Sass 的使用應(yīng)該成為現(xiàn)代前端開(kāi)發(fā)的一項(xiàng)必備技能，尤其是那些大型的、復(fù)雜的 Web 項(xiàng)目。

Sass 與 Compass 實(shí)戰(zhàn)