1 使用變量

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//編譯後

nav {
  width: 100px;
  color: #F90;
}

1-2 變量引用

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

//編譯後

.selected {
  border: 1px solid #F90;
}

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

//編譯後

.selected {
  border: 1px solid #F90;
}

1-3 變量名中劃線和下劃線的使用

取決於個人喜好

2 嵌套CSS規則

如：
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

sass：
#content {
  article {
    h1 { color: #333 }
    p 
 
{ margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

2-1 hover

錯誤寫法：
article a {
  color: blue;
  :hover { color: red }
}


正確寫法：
article a {
  color: blue;
  &:hover { color: red }
}

2-2 群組選擇器的嵌套

如：
.container h1, .container h2, .container h3 { margin-bottom: .8em }

處理方式為：
.container 
 
{
  h1, h2, h3 {margin-bottom: .8em}
}

又如：
nav, aside {
  a {color: blue}
}

2-3 子組合選擇器和同層選擇器：> + ~

如：
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

處理方式為：
article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

2-4 嵌套屬性

如：
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}
處理為：
nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

又如：
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}
處理為：
nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;  
  }  
}

3 導入SASS文件

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

sass也有一個@import規則，但不同的是，sass的@import規則在生成css文件時就把相關文件導入進來。這意味著所有相關的樣式被歸納到了同一個css文件中，而無需發起額外的下載請求。另外，所有在被導入文件中定義的變量和混合器（參見2.5節）均可在導入文件中使用。

使用sass的@import規則並不需要指明被導入文件的全名。你可以省略.sass或.scss文件後綴（見下圖）。這樣，在不修改樣式表的前提下，你完全可以隨意修改你或別人寫的被導入的sass樣式文件語法，在sass和scss語法之間隨意切換。舉例來說，@import"sidebar";這條命令將把sidebar.scss文件中所有樣式添加到當前樣式表中。

3-1 使用SASS部分文件

當通過@import把sass樣式分散到多個文件時，你通常只想生成少數幾個css文件。那些專門為@import命令而編寫的sass文件，並不需要生成對應的獨立css文件，這樣的sass文件稱為局部文件。對此，sass有一個特殊的約定來命名這些文件。

此約定即，sass局部文件的文件名以下劃線開頭。這樣，sass就不會在編譯時單獨編譯這個文件輸出css，而只把這個文件用作導入。當你@import一個局部文件時，還可以不寫文件的全名，即省略文件名開頭的下劃線。舉例來說，你想導入themes/_night-sky.scss這個局部文件裏的變量，你只需在樣式表中寫@import "themes/night-sky";。

局部文件可以被多個不同的文件引用。當一些樣式需要在多個頁面甚至多個項目中使用時，這非常有用。在這種情況下，有時需要在你的樣式表中對導入的樣式稍作修改，sass有一個功能剛好可以解決這個問題，即默認變量值。

3-2 默認變量值

一般，重復聲明變量會被覆蓋，如：
$link-color: blue;
$link-color: red;
a {
color: $link-color;
}

特別是你的sass文件庫在他人import時，他人可能想修改某些值的情況下，sass提供類似！import標簽的對立面，即：如果這個變量被重新聲明賦值了，那就用它的聲明的值，否則就用這個默認值。
處理為：
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}
在上例中，如果用戶在導入你的sass局部文件之前聲明了一個$fancybox-width變量，那麽你的局部文件中對$fancybox-width賦值400px的操作就無效。如果用戶沒有做這樣的聲明，則$fancybox-width將默認為400px。

3-3 嵌套導入

如，一個名為_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;
  }
}
被導入的局部文件中定義的所有變量和混合器，也會在這個規則範圍內生效。
好處：這些變量和混合器不會全局有效，這樣我們就可以通過嵌套導入只對站點中某一特定區域運用某種顏色主題或其他通過變量配置的樣式。

3-4 原生CSS導入

由於sass兼容原生的css，所以它也支持原生的CSS@import。盡管通常在sass中使用@import時，sass會嘗試找到對應的sass文件並導入進來，但在下列三種情況下會生成原生的CSS@import，盡管這會造成瀏覽器解析css時的額外下載：

• 被導入文件的名字以.css結尾；
• 被導入文件的名字是一個URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字體API提供的相應服務；
• 被導入文件的名字是CSS的url()值。

這就是說，你不能用sass的@import直接導入一個原始的css文件，因為sass會認為你想用css原生的@import。但是，因為sass的語法完全兼容css，所以你可以把原始的css文件改名為.scss後綴，即可直接導入了。

文件導入是保證sass的代碼可維護性和可讀性的重要一環。次之但亦非常重要的就是註釋了。註釋可以幫助樣式作者記錄寫sass的過程中的想法。在原生的css中，註釋對於其他人是直接可見的，但sass提供了一種方式可在生成的css文件中按需抹掉相應的註釋。

4 靜默註釋

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

body {
  color /* 這塊註釋內容不會出現在生成的css中 */: #333;
  padding: 1; /* 這塊註釋內容也不會出現在生成的css中 */ 0;
}

5 混合器

混合器使用@mixin標識符定義。

先寫一個混合器：
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

通過@include來使用這個混合器
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

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

5-1 何時使用混合器

利用混合器，可以很容易地在樣式表的不同地方共享樣式。如果你發現自己在不停地重復一段樣式，那就應該把這段樣式構造成優良的混合器，尤其是這段樣式本身就是一個邏輯單元，比如說是一組放在一起有意義的屬性。

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

混合器在某些方面跟css類很像。都是讓你給一大段樣式命名，所以在選擇使用哪個的時候可能會產生疑惑。最重要的區別就是類名是在html文件中應用的，而混合器是在樣式表中應用的。這就意味著類名具有語義化含義，而不僅僅是一種展示性的描述：用來描述html元素的含義而不是html元素的外觀。而另一方面，混合器是展示性的描述，用來描述一條css規則應用之後會產生怎樣的效果。

在之前的例子中，.notice是一個有語義的類名。如果一個html元素有一個notice的類名，就表明了這個html元素的用途：向用戶展示提醒信息。rounded-corners混合器是展示性的，它描述了包含它的css規則最終的視覺樣式，尤其是邊框角的視覺樣式。混合器和類配合使用寫出整潔的html和css，因為使用語義化的類名亦可以幫你避免重復使用混合器。為了保持你的html和css的易讀性和可維護性，在寫樣式的過程中一定要銘記二者的區別。

有時候僅僅把屬性放在混合器中還遠遠不夠，可喜的是，sass同樣允許你把css規則放在混合器中。

5-2 混合器中的CSS規則

如下一個包含css規則的名為no-bullets的混合器：
@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

使用：
ul.plain {
  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;
}

5-3 給混合器傳參

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

// 使用：
a {
  @include link-colors(blue, red, green);
}

// Sass最終生成的是：

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
  );
}

5-4 默認參數值

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

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

如果像下邊這樣調用：@include link-colors(red) $hover和$visited也會被自動賦值為red。

6 使用選擇器繼承來精簡CSS

選擇器繼承是說一個選擇器可以繼承為另一個選擇器定義的所有樣式。這個通過@extend語法實現，如下代碼:

//通過選擇器繼承繼承樣式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

.seriousError不僅會繼承.error自身的所有樣式，任何跟.error有關的組合選擇器樣式也會被.seriousError以組合選擇器的形式繼承，如下代碼:

//.seriousError從.error繼承樣式
.error a{  //應用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //應用到hl.seriousError
  font-size: 1.2rem;
}

Sass學習筆記（一）