Sass

全称是“Syntactically Awesome Style Sheets”。Sass 是 层叠样式表（CSS）的扩展，CSS 是用于定义 HTML 文档布局和格式的语言。Sass 使用完全兼容 CSS 的 语法，但提供了 CSS 变量和嵌套规则等额外功能，使 CSS 更高效，也更容易编辑。

标准 CSS 的一个缺点是它不支持变量。例如，如果有多种样式使用相同的颜色，就需要为每种样式分别定义该颜色。如果决定更改颜色，就必须在 CSS 文档中更改每个实例。使用 Sass 时，可以将颜色定义为变量，然后将该变量分配给所有使用它的样式。如果决定更改颜色，只需更改一次——在文档中最初定义它的位置。

下面的示例展示了如何在 Sass 中定义和使用 CSS 变量。

  $myColor: #00695C;

  .pageTop { background-color: $myColor; }
  .infoText { color: $myColor; }
  .pageBottom { background-color: $myColor; }

Sass 还支持嵌套规则，使开发人员能够编写更高效的代码。在下面的示例中，.button 类嵌套在 #top p 样式中。

  #top p
  {
    color: #004D40;

    .button
    {
      background-color: #039BE5;
      color: #FFF;
    }
  }

经过编译后，上述代码会生成以下 CSS：

  #top p { color: #004D40; }
  #top p .button { background-color: #039BE5; color: #FFF; }

虽然 Sass 为Web 开发人员提供了多项优势，但Web 浏览器无法识别 Sass 文档。因此，必须先将 Sass 文件编译为 CSS，才能在 HTML 文档中使用。可以在本地完成编译，然后使用 Compass.app 或 Koala 等程序将 CSS 上传到 Web 服务器。也可以在服务器上使用 PHP 或 Ruby 脚本，将 Sass 编译为 CSS。