变量CSS 中缺失的一项重要功能就是变量。样式表中往往存在大量重复。一种有用的选项就是一次性写入一个值，然后通过别名进行重用。举例来说，假设您有一个类似于清单 4 的样式表。
清单 4. CSS 元素和颜色1
2
3
| #someElement { color:#541B32; }
#anotherElement { color:#541B32; }
#yetAnotherElement { color:#541B32; }
|
标准 CSS 要求您显式写入所有值，因此会导致 中的冗余内容。但在使用 Sass 时，您可以提高工作效率，如清单 5 所示。
清单 5. Sass 元素和颜色1
2
3
4
| $purplishColor:#541B32;
#someElement { color purplishColor; }
#anotherElement { colorpurplishColor; }
#yetAnotherElement { colorpurplishColor; }
|
优势显而易见。现在，您可以在一个位置更改所有元素的颜色。在 中，$purplishColor是一个变量，因此您可以随时在 Sass 文件中对其进行更改。Sass 变量没有类型，您可以为同一个变量指定字符串、整数值，甚至是颜色值。
模块您可以轻松将 CSS 代码拆分为多个模块，再通过 Sass 引擎将它们聚集在一起。可以使用 @import指令来导入模块，如清单 6 所示。该指令获取一个文件名、一个超链接或其他任意路径。CSS 和 SCSS 文件均载入并合并为同一个文档。
清单 6. Sass 导入模块1
2
| @import "colors.scss"
@import "links.scss"
|
在 CSS 和 Sass 中拆分代码的方式截然不同。将 CSS 代码拆分为较小的样式表时，每个样式表都会获取一个不同的 HTTP 加载请求。Sass @import指令直接获取模块代码，因此能保证您始终使用一个 CSS 文件。
字符串和插值Sass 支持字符串联接和变量插值。变量不再仅仅限于用作属性值，您可以直接将变量值插入属性和选取器名称，如清单 7 所示。
清单 7. Sass 字符串和变量操作1
2
3
4
5
6
7
8
| $image_dir:'images/web/';
$page:10;
.button
{
background-image: url( $image_dir + 'image.gif' );
:before { content:" age #{ $page }"; }
}
|
中的代码将转换为清单 8 中的 CSS 代码。
清单 8. CSS 字符串和变量操作1
2
3
4
| .button {
background-image: url("images/web/image.gif"); }
.button:before {
content:"age 10"; }
|
数学运算 Sass 支持使用标准数学运算符执行数字运算，如清单 9 所示。您可以对变量值执行简单的数学运算。
清单 9. 对数字执行的 Sass 数学运算1
2
3
4
| .block {
$block_width:500px;
widthblock_width - ( 10px * 2 ) - ( 1px * 2 );
}
|
中的代码将被转换为清单 10 中的 CSS 代码。
清单 10. 对数字执行的 CSS 数学运算1
2
| .block {
width:478px; }
|
此外还支持对颜色执行数学运算，如清单 11 所示。
清单 11. 对颜色执行的 Sass 数学运算1
2
3
4
5
| .block {
$color:#010203;
colorcolor;
border-colorcolor - #010101;
}
|
中的代码将被转换为清单 12 中的 CSS 代码。
清单 12. 对颜色执行的 CSS 数学运算1
2
3
| .block {
color:#010203;
border-color:#000102; }
|
|
