Sass

Sass 全稱 "Syntactically Awesome StyleSheets", 是 CSS 的一種擴展語言。

變數 Variable

Sass 允許使用變數（最新的 CSS 也支持了變數）。 可以在 Sass 中聲明變數，併為它賦值。

在 Sass 中，變數以 $ 開頭的，後跟變數名。

 $text-color: red;

使用

color: $text-color;

嵌套 CSS Nest

Sass 允許 CSS 規則的嵌套，這在組織樣式表結構的時候會很有用。

在 CSS 里，每個元素的樣式都需要寫在獨立的代碼塊中，如下所示：

nav {
  background-color: red;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
}

對於一個大型項目，CSS 規則會很複雜。 這時，引入嵌套功能（即在對應的父元素中寫子元素的樣式）可以有效地簡化代碼：

nav {
  background-color: red;

  ul {
    list-style: none;

    li {
      display: inline-block;
    }
  }
}

Mixins 可重用 CSS Reusable

在 Sass 中，mixin 是一組 CSS 聲明，可以在整個樣式表中重覆使用。

CSS 的新功能需要一段時間適配後，所有瀏覽器後才能完全使用。 隨著瀏覽器的不斷升級，使用這些 CSS 規則時可能需要添加瀏覽器首碼。 考慮 box-shadow：

div {
  -webkit-box-shadow: 0px 0px 4px #fff;
  -moz-box-shadow: 0px 0px 4px #fff;
  -ms-box-shadow: 0px 0px 4px #fff;
  box-shadow: 0px 0px 4px #fff;
}

對於所有具有 box-shadow 屬性的元素重寫此規則，或者更改每個值以測試不同的效果，需要花費大量的精力。 Mixins 就像 CSS 的函數。 以下是一個例子：

@mixin box-shadow($x, $y, $blur, $c){ 
  -webkit-box-shadow: $x $y $blur $c;
  -moz-box-shadow: $x $y $blur $c;
  -ms-box-shadow: $x $y $blur $c;
  box-shadow: $x $y $blur $c;
}

定義以 @mixin 開頭，後跟自定義名稱。 參數（$x，$y，$blur，以及上例中的 $c ）是可選的。 現在在需要 box-shadow 規則的地方，只需一行 mixin 調用而無需添加所有的瀏覽器首碼。 mixin 可以通過 @include 指令調用。

div {
  @include box-shadow(0px, 0px, 4px, #fff);
}

@if @else 邏輯

Sass 中的 @if 指令對於測試特定情況非常有用——它的工作方式與 JavaScript 中的 if 語句類似。

@mixin make-bold($bool) {
  @if $bool == true {
    font-weight: bold;
  }
}

類似 JavaScript，可以在 Sass 中使用 @else if 和 @else 測試更多條件：

@mixin text-effect($val) {
  @if $val == danger {
    color: red;
  }
  @else if $val == alert {
    color: yellow;
  }
  @else if $val == success {
    color: green;
  }
  @else {
    color: black;
  }
}

@for 迴圈

在 Sass 中使用 @for 迴圈添加樣式，它的用法和 JavaScript 中的 for 迴圈類似。

@for 以兩種方式使用：“開始 through 結束” 或 “開始 to 結束”。 主要區別在於“開始 to 結束”不包括 結束數字，而“開始 through 結束”包括 結束數字。

@for $i from 1 through 12 {
  .col-#{$i} { width: 100%/12 * $i;  }
}

@for $i from 1 to 6{
  .text-#{$i} {
    font-size: 15px * $i;
  }
}

#{$i} 部分是將變數（i）與文本組合成字元串的語法。 當 Sass 文件轉換為 CSS 時，它看起來像這樣：

.col-1 {
  width: 8.33333%;
}

.col-2 {
  width: 16.66667%;
}

...

.col-12 {
  width: 100%;
}

這是創建網格佈局的有效方法。

@each 遍歷列表

Sass 還提供 @each 指令，該指令迴圈遍歷列表或映射中的每個項目。 在每次迭代時，變數將從列表或映射分配給當前值。

@each $color in blue, red, green {
  .#{$color}-text {
    color: $color;
}
}

map 的語法略有不同。 這是一個示例：

$colors: (color1:blue, color2:red, color3:green);
@each $key, $color in $colors {
  .#{$color}-text {
    color: $color;
    }
}

請註意，需要用 $key 變數來引用 map 中的鍵。 否則，編譯後的 CSS 將包含 color1，color2...... 以上兩個代碼示例都轉換為以下 CSS：

.blue-text {
  color: blue;
}

.red-text {
  color: red;
}

.green-text {
  color: green;
}

@while 迴圈

Sass 中的 @while 指令與 JavaScript 中的 while 類似。 只要滿足條件，它就會一直創建 CSS 代碼。

$x : 1;
@while $x < 13 {
  .col-#{$x} {
    width: 100%/12 * $x;
  }
  $x: $x + 1;
}

Partials

Sass 中的 Partials 是包含 CSS 代碼段的單獨的文件。 這些片段可以導入其它 Sass 文件使用。 可以把類似代碼放到模塊中，以保持代碼結構規整且易於管理。

partials 的名稱以下劃線（_）字元開頭，這樣 Sass 就知道它是 CSS 的一小部分，而不會將其轉換為 CSS 文件。 此外，Sass 文件以 .scss 文件擴展名結尾。 要將 partial 中的代碼放入另一個 Sass 文件中，使用 @import 指令。

例如，如果所有 mixins 都保存在名為 “_mixins.scss” 的 partial 中，並且在 “main.scss” 文件中需要它們，下麵是使用方法：

@import 'mixins'

請註意，import 語句中不需要下劃線——Sass 知道它是 partial。 將 partial 導入文件後，可以使用所有變數、mixins 和其它代碼。

extend

Sass 有一個名為 extend 的功能，可以很容易地從一個元素中借用 CSS 規則併在另一個元素上重用它們。

.panel{
  background-color: red;
  height: 70px;
  border: 2px solid green;
}

現在需要另一個名為 .big-panel 的面板。 它具有與 .panel 相同的基本屬性，但還需要 width 和 font-size。 可以從 .panel 複製並粘貼初始 CSS 規則，但是當添加更多類型的面板時，代碼會變得重覆。 extend 指令是一種重用為一個元素編寫的規則的簡單方法，可以為另一個元素重用並添加更多規則：

.big-panel{
  @extend .panel;
  width: 150px;
  font-size: 2em;
}

除了新樣式之外，.big-panel 將具有與 .panel 相同的屬性。