Sass 是一款強(qiáng)化 CSS 的輔助工具，它在 CSS 語法的基礎(chǔ)上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導(dǎo)入 (inline imports) 等高級(jí)功能，這些拓展令 CSS 更加強(qiáng)大與優(yōu)雅。使用 Sass 以及 Sass 的樣式庫（如 Compass）有助于更好地組織管理樣式文件，以及更高效地開發(fā)項(xiàng)目。

1. 特色功能 (Features)

• 完全兼容 CSS3
• 在 CSS 基礎(chǔ)上增加變量、嵌套 (nesting)、混合 (mixins) 等功能
• 通過函數(shù)進(jìn)行顏色值與屬性值的運(yùn)算
• 提供控制指令 (control directives)等高級(jí)功能
• 自定義輸出格式

2.CSS 功能拓展 (CSS Extensions)

2.1. 嵌套規(guī)則 (Nested Rules)

#main p {
  color: #00ff00;
  width: 97%;
  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

編譯為

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

2.2. 父選擇器 & (Referencing Parent Selectors: &)

在嵌套 CSS 規(guī)則時(shí)，有時(shí)也需要直接使用嵌套外層的父選擇器，例如，當(dāng)給某個(gè)元素設(shè)定 hover 樣式時(shí)，或者當(dāng) body 元素有某個(gè) classname 時(shí)，可以用 & 代表嵌套規(guī)則外層的父選擇器。

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

2.3. 屬性嵌套 (Nested Properties)

有些 CSS 屬性遵循相同的命名空間 (namespace)，比如 font-family, font-size, font-weight 都以 font 作為屬性的命名空間。為了便于管理這樣的屬性，同時(shí)也為了避免了重復(fù)輸入，Sass 允許將屬性嵌套在命名空間中，例如：

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

3.SassScript

在 CSS 屬性的基礎(chǔ)上 Sass 提供了一些名為 SassScript 的新功能。 SassScript 可作用于任何屬性，允許屬性使用變量、算數(shù)運(yùn)算等額外功能。

通過 interpolation，SassScript 甚至可以生成選擇器或?qū)傩悦?，這一點(diǎn)對(duì)編寫 mixin 有很大幫助。

3.1. 變量 $ (Variables: $)

SassScript 最普遍的用法就是變量，變量以美元符號(hào)開頭，賦值方法與 CSS 屬性的寫法一樣：

$width: 5em;

直接使用即調(diào)用變量：

#main {
  width: $width;
}

變量支持塊級(jí)作用域，嵌套規(guī)則內(nèi)定義的變量只能在嵌套規(guī)則內(nèi)使用（局部變量），不在嵌套規(guī)則內(nèi)定義的變量則可在任何地方使用（全局變量）。將局部變量轉(zhuǎn)換為全局變量可以添加 !global 聲明：

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}