Sass

Sass（英文全稱：Syntactically Awesome Stylesheets）是一個最初由Hampton Catlin設計並由Natalie Weizenbaum開發的層疊樣式表語言。在開發最初版本之後，Weizenbaum和Chris Eppstein繼續通過SassScript來繼續擴充Sass的功能。SassScript是一個在Sass文件中使用的小型腳本語言。

Sass是一個將腳本解析成CSS的腳本語言，即SassScript。Sass包括兩套語法。最開始的語法叫做「縮進語法」，與Haml類似，使用縮進來區分代碼塊，並且用換行將不同規則分隔開。而較新的語法叫做「SCSS」，使用和CSS一樣的塊語法，即使用大括號將不同的規則分開，使用分號將具體的樣式分開。通常情況下，這兩套語法通過.sass和.scss兩個文件擴展名區分開。

CSS3包括一系列選擇器和偽類選擇器，Sass設計了一些語法，對選擇器功能進行了擴展。雖然擴展功能不是CSS的語法，但是Sass解釋器會把SassScript解釋成合乎CSS語法的CSS文件。此外，Sass解釋器也可以對.sass或.scss文件的修改進行監視，以及時更新css文件。可以認為Sass在CSS基礎上加入了許多語法糖。

Sass的官方解釋器是開源的並且用Ruby語言寫成，但是也有用PHP、C語言、Java等實現的版本（C語言版本叫做llibSass，Java語言版本叫做JSass）。

Sass中縮進是語法的一部分。SCSS是巢狀元語言，一段合法的CSS代碼也是一段合法的SCSS代碼。Sass支持與Firefox插件Firebug集成。

SassScript提供以下功能：變量、嵌套、混入（Mixin）、選擇器繼承。

## 變量

Sass支持定義變量。變量以美元符號（$）作為開頭。變量用冒號（:）賦值。

SassScript支持四種數據類型：

- 數值（可包括單位）
- 字串
- 顏色
- 布爾類型

變量可以用作函數的參數或返回值。在解釋過程中，解釋器會把變量的值寫入最終的CSS文件中。

SCSS語法的變量示例：

```scss
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 10%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}
```

Sass語法的變量示例：

```sass
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 10%)

.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $blue
```

這兩段代碼會被解釋成：

```css
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}
```

## 嵌套

CSS雖然支持嵌套但是不支持代碼塊的嵌套，而SCSS支持。這樣可更加清晰地表示元素之間的關係。

```sass
table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.3em;
  }
}
```

會被解釋成：

```css
table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.3em;
}
```

在Sass文檔中還可以看到有關命名空間、父級引用等的內容。

## 混入（Mixin）

Mixin包含一段合法Sass代碼，類似於C語言的宏定義。調用Mixin時，解釋器會將Mixin擴展成它所包含的完整的Sass代碼，因此可以有效地減少代碼重複，從而寫出更加乾淨的代碼。CSS不支持Mixin，因此重複和類似的代碼必須挨個書寫。

```sass
@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}

#data {
  @include table-base;
}
```

會被解釋成：

```css
#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}
```

### 循環

Sass支持用@for、@each和@while語句進行迭代。

```sass
$squareCount: 3;
@for $i from 1 through $squareCount {
  #square-#{$i} {
   background-color: red;
   width: 50px * $i;
   height: 120px / $i
  }
}
```

會被解釋為：

```css
#square-1 {
  background-color: red;
  width: 50px;
  height: 120px;
}

#square-2 {
  background-color: red;
  width: 100px;
  height: 60px;
}

#square-3 {
  background-color: red;
  width: 150px;
  height: 40px;
}
```

### 參數

Mixin支持參數。

```sass
@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

#data {
  @include left(10px);
}
```

會被解釋為：

```css
#data {
  float: left;
  margin-left: 10px;
}
```

### 包含

```sass
@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}

@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

#data {
  @include left(10px);
  @include table-base;
}
```

會被解釋為：

```css
#data {
  float: left;
  margin-left: 10px;
}
#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}
```

## 繼承

CSS3支持DOM層次，但是不支持樣式的繼承。Sass語言通過@extend關鍵詞實現了繼承功能。

```sass
.error {
  border: 1px #f00;
  background: #fdd;
}
.error.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  @extend .error;
  border-width: 3px;
}
```

會被解釋為：

```css
.error, .badError {
  border: 1px #f00;
  background: #fdd;
}

.error.intrusion,
.badError.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  border-width: 3px;
}
```

Sass支持多重繼承.

## libSass

在2012年HTML5開發者大會上，Sass的創建者Hampton Catlin宣布libSass 1.0版。libSass是一個由Catlin、Araon Leung和Moovweb開發團隊開發的開放原始碼的C++實現。Current Sass maintainer, Chris Eppstein, has expressed intent to contribute as well.

libSass的設計目標是：

- 性能：開發者反映，C++的實現速度是Ruby實現的10倍。
- 更容易集成：因為是一個C++庫，不必集成或實現Ruby解釋器，因此在自行開發軟體的時候事情會變得更容易。例如，libSass現在已經被應用到Node.js、Go和Ruby等環境。
- 兼容性：libSass的目標是與Ruby實現完全兼容。但是目標尚未完全實現。

## IDE集成

IDE｜軟體｜網站

Adobe Dreamweaver CC 2017｜https://blogs.adobe.com/creativecloud/getting-started-with-css-preprocessors-less-and-sass/

Eclipse

Emacs｜SCSS Mode｜https://github.com/antonj/scss-mode/

JetBrains IntelliJ IDEA (Ultimate Edition)｜https://www.jetbrains.com/idea/

JetBrains PhpStorm｜http://www.jetbrains.com/phpstorm/

JetBrains RubyMine｜http://www.jetbrains.com/ruby/

Microsoft Visual Studio｜Mindscape｜http://www.mindscapehq.com/products/web-workbench

Microsoft Visual Studio｜SassyStudio｜http://visualstudiogallery.msdn.microsoft.com/85fa99a6-e4c6-4a1c-9f00-e6a8129b6f4d

Microsoft WebMatrix｜http://www.microsoft.com/web/

NetBeans｜http://plugins.netbeans.org/plugin/34929/scss-support

Vim｜haml.zip｜http://www.vim.org/scripts/script.php?script_id=1433

Atom｜https://github.com/atom/language-sass

Visual Studio Code｜https://code.visualstudio.com/Docs/languages/css

Sublime｜https://github.com/P233/Syntax-highlighting-for-Sass

Edit+｜https://www.editplus.com/others.html

## 外部連結

- Haml/Sass Google Group
- pyScss, a Python Scss library and client
- Sai the mixins extension and CSS authoring framework for Less & Sass/Scss (Git)
- Sass tools and resources

## 基本資料

- 發行時間：2007
- 設計者：Hampton Catlin
- 開發者：Natalie Weizenbaum, Chris Eppstein
- 軟體版本週期：3.5.6
- 軟體版本週期：2018年3月23日
- 類型系統：動態類型
- 軟體實現：Ruby
- 受影響於：CSS, YAML, Haml, LESS
- 施影響於：LESS, Stylus, Tritium
- 作業系統：跨平台
- 許可證：MIT許可證
- 文件擴展名：.sass, .scss