**Sass**（英文全称：**S**yntactically **A**wesome **S**tyle**s**heets）是一个最初由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语法的变量示例：

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

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

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

```

Sass语法的变量示例：

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

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

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

```

这两段代码会被解释成：

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

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

```

嵌套
--

CSS虽然支持嵌套但是不支持代码块的嵌套，而SCSS支持。这样可更加清晰地表示元素之间的关系。

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

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

```

会被解释成：

```
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，因此重复和类似的代码必须挨个书写。

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

#data {
 @include table-base;
}

```

会被解释成：

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

```

### 循环

Sass支持用@for、@each和@while语句进行迭代。

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

```

会被解释为：

```
#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支持参数。

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

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

```

会被解释为：

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

```

### 包含

```
@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;
}

```

会被解释为：

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

```

继承
--

CSS3支持DOM层次，但是不支持样式的继承。Sass语言通过@extend关键词实现了继承功能。

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

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

```

会被解释为：

```
.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 |  |  |
| Eclipse |  |  |
| Emacs | SCSS Mode |  |
| JetBrains IntelliJ IDEA (Ultimate Edition) |  |  |
| JetBrains PhpStorm |  |  |
| JetBrains RubyMine |  |  |
| Microsoft Visual Studio | Mindscape |  |
| Microsoft Visual Studio | SassyStudio |  |
| Microsoft WebMatrix |  |  |
| NetBeans |  |  |
| Vim | haml.zip |  |
| Atom |  |  |
| Visual Studio Code |  |  |
| Sublime |  |  |
| Edit+ |  |  |

参见
--

* LESS (层叠样式表)
* Stylus

外部链接
----

* 官方网站 在维基数据上编辑此内容
* 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

|  |  |  |  |  |  |  |  |  |  |  |  |  |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| 

| * 
* 论
* 编
样式表语言（英语：） |
| --- |
|  |
| 模型 | 
* 桌面出版（英语：）
* 网页开发
* 用户界面（英语：）

 |
|  |
| 标准 | 
* CSS
* DSSSL（英语：）
* XSL

 |
|  |
| 非标准 | 
* JavaScript (JSSS)（英语：）
* FOSI（英语：）
* Qt
* Sass
* Less
* Stylus（英语：）
* SMIL Timesheets（英语：）
* PostCSS（英语：）

 |
|  |
| 
* 列表
* 比较（英语：）

 |

 |