嵌套选取器和属性CSS 中最出色的特性之一就是嵌套选取器（应用在一个选取器内使用另一个选取器的样式）。 要在 CSS 中嵌套选取器，必须繁琐地列出您定义的各子选取器的父选取器。为了在 Saas 中简化此过程，您可以嵌套选取器，如清单 13 所示。
清单 13. Sass 嵌套选取器1
2
3
4
| #some {
border:1px solid red;
.some { background: white; }
}
|
中的代码将被转换为清单 14 中的 CSS 代码。
清单 14. CSS 嵌套选取器1
2
| #some { border:1px solid red; }
#some .some { background: white; }
|
控制指令Sass 控制指令为 CSS 代码提供了流和逻辑。本节介绍的基本控制指令包括 @if、@for 和 @each。
@ifSass 支持基本的 if/else 函数，可将其编译为 CSS。举例来说，在清单 15 中，您希望将所有链接的颜色设置为黑色，底色已经为黑色的情况除外。如果底色已经为黑色，则将链接颜色设置为白色。
清单 15. Sass @if示例1
2
3
4
5
6
7
8
9
| $color: black;
.link {
@if $color == black {
color: white;
} @else {
color: black;
}
}
|
中的代码将被转换为清单 16 中的 CSS 代码。
清单 16. CSS @if示例1
2
| .link {
color: white; }
|
此处的 @if的用途与在其他编程语言中相同。@if语句后面可接 @else if语句和一个 @else语句。如果 @if语句失败，则依次尝试 @else if语句，直至其中一条语句获得成功或到达 @else为止。
@for@for指令重复地输出一组样式。对于每次重复，都会使用一个计数器变量来调整输出，如清单 17 所示。
清单 17. Sass @for示例1
2
3
| @for $i from 1 through 5 {
.button-#{$i} { width:1px * $i; }
}
|
中的代码将被转换为清单 18 中的 CSS 代码。
清单 18. CSS @for示例1
2
3
4
5
6
7
8
9
10
| .button-1 {
width:1px; }
.button-2 {
width:2px; }
.button-3 {
width:3px; }
.button-4 {
width:4px; }
.button-5 {
width:5px; }
|
@each@each指令获取列表中的项目，并列出包含所列出的值的样式，如清单 19 所示。
清单 19. Sass @each示例1
2
3
4
5
| @each $company in IBM, Motorola, Google {
.#{$company}-icon {
background-image: url('/images/#{$company}.jpg');
}
}
|
中的代码将被转换为清单 20 中的 CSS 代码。
清单 20. CSS @each示例1
2
3
4
5
6
| .IBM-icon {
background-image: url("/images/IBM.jpg"); }
.Motorola-icon {
background-image: url("/images/Motorola.jpg"); }
.Google-icon {
background-image: url("/images/Google.jpg"); }
|
函数 您可以在 Sass 中应用函数。通过函数制定计划，重构和抽象构成成功技术基础的方法，以便在后续项目中重用和移植。
Sass 提供了大量内置函数。例如，您可以使用清单 21 中所示的 rgb()和 darken()来处理颜色。您可以更改色调、饱和度、亮度、透明度、流动性比例和其他许多方面。您还可以定义自定义函数，并在需要时重用它们。
清单 21. Sass 函数1
2
3
4
5
6
| #someElement {
color: rgb(150, 50, 100);
}
#someDarkYellowElement {
color: darken(yellow, 33%);
}
|
中的代码将被转换为清单 22 中的 CSS 代码。
清单 22. CSS 函数1
2
3
4
| #someElement {
color:#963264; }
#someDarkYellowElement {
color:#575700; }
|
Sass 包含数学、字符串、列表、自省等函数。关于完整的 Sass 函数列表，请参见 部分。
混入 (Mixin)可重用您的 CSS 代码切片的混入是使用 @mixin指令定义的，如清单 23 所示。利用混入，您可以定义属性值对的模式，以便在其他规则集中重用这些模式。混入功能有助于简化样式表，提高其可读性。基本上来说，@mixin是一种用户定义的函数。混入同样可接受参数，也就是说，您可以使用几个混入轻松生成大量样式。
清单 23. Sass 混入1
2
3
4
5
6
7
8
9
10
11
12
| @mixin rounded-corners($radius:5px) {
border-radius radius;
-webkit-border-radiusradius;
-moz-border-radiusradius;
}
#header {
@include rounded-corners;
}
#footer {
@include rounded-corners(10px);
}
|
中的代码将被转换为清单 24 中的 CSS 代码。
清单 24. CSS 混入1
2
3
4
5
6
7
8
9
| #header {
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px; }
#footer {
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px; }
|
函数和混入极为相似。两者均接受变量，但两者的差异在于，函数总是会返回一个值，但混入的输出是代码行。
CompassCompass 是一种开放源码 CSS 创作框架，它使用了 Sass 样式表语言。其多种可重用设计模式（使用混入）能够帮助您构造可靠、强大的样式表。Compass 常用代码库是 Sass 开发工作中不可或缺的工具。
究其本质而言，Compass 是 CSS 的包装器。它能够通过图像拼合 (spriting) 和其他技术处理常见的 CSS 问题，例如浏览器兼容性、布局和样式表优化。
与 Sass 相似，Compass 也以 Ruby gem 程序包的形式提供。如需安装 Compass，请在命令行中输入 gem install compass。
现在，您可以使用 Compass 框架中定义的混入（函数）。Compass 中提供了许多预定义的函数、类和原生 CSS3 支持。 有关 Compass 的更多信息，请参阅 部分。 |
