1. 简介
以前我们在写 CSS 时，通常都是直接在外部 CSS 文件中一个属性一个属性的敲，如果要实现代码的复用，那就 ctrl+c 和 ctrl+v 了，如果要使用某个 RGB 颜色值，还得一遍遍的翻回去复制。这样的开发效率很低，并且也很烦琐，因为 CSS 并不是编程语言，所以也就不能像写 JavaScript 代码一样来实现流程控制等操作了。
幸运的是现在我们有了“CSS预处理器”（css preprocessor），在 CSS 中加入了编程元素，当然不是直接使用 CSS 来实现编程，而是使用专门的编程语言，进行设计后再编译成 CSS 文件。
这种“CSS预处理器”也有很多种，参见8 CSS preprocessors to speed up development time，本文主要介绍 SASS 的使用。
2. SASS 安装与使用
2.1 安装
要使用 SASS 首先需要安装 SASS 环境，可参见：http://sass-lang.com/install。
SASS 是基于 Ruby 语言写的，所以必须先安装 Ruby，但是 SASS 与 Ruby 的语法没有关系，即使完全不懂 Ruby，也可以使用 SASS。
windows 系统中安装 Ruby 最快速的方式是使用 RubyInstaller。RubyInstaller 也会自动安装命令行工具让我们可以直接使用它的库。
Ruby 安装好后，打开命令提示符（win+r 运行框中输入 cmd 回车即可），输入以下命令：
1
gem install sass
即可安装 SASS，但安装有时也会被墙，所以可以直接下载 SASS 的 gem 库离线安装，下载地址为：https://api.rubygems.org/gems/sass-3.4.22.gem。
下载后在命令提示符下直接安装：
1
gem install d:/sass-3.4.22.gem
当然我们前边也安装了 Gulp 插件 gulp-sass，可以借助 Gulp 来实现 SASS 编译，也不用安装 Ruby。详情见 《Gulp 使用教程》。
2.2 使用
SASS 文件就是普通的文本文件，可以直接使用 CSS 语法，文件后缀名是 .scss（3.0以前的版本通常使用 .sass 后缀）。
如果安装了 Ruby 环境和 SASS，则可以在命令提示符下输入：
1
sass style.scss
会直接在屏幕上显示出 .scss 文件转换为 .css 文件后的样式内容。也可以继续跟上输出文件的路径名，将编译后的 CSS 内容保存到文件中：
1
sass style.scss style.css
在编译成 CSS 时，SASS 提供四种编译风格：
- nested —- 嵌套缩进
- expanded —- 没有缩进，扩展的
- compact —- 简洁格式
- compressed —- 压缩
默认是使用 nested 风格，在生产环境当中，一般使用最后一个（compressed）。
也可以让 SASS 监听某个文件或目录的修改，自动生成编译后的版本：
1
sass --watch style.scss:style.css
或
1
sass --watch app/sass:public/stylesheets
如果没有安装 Ruby 环境而是使用 Gulp 插件，可参见 https://github.com/dlmanning/gulp-sass 的使用。
如：
1
2
3
4
5
6
7
8
var gulp = require("gulp"),
sass = require("gulp-sass");
gulp.task("sass", function(){
gulp.src("scss/*.scss")
.pipe(sass({outputStyle:"compact"}))
.pipe(gulp.dest("dist/css"));
});
3. SASS 基本语法
3.1 注释
SASS 中有三种注释：
单行注释
1
// 单行注释
在输出 CSS 文件时不保留该注释内容。
多行注释
1
2
3
4
/*
* 多行注释内容
* 作者：小明
*/
在编译输出的非压缩格式的 CSS 文件中会保留，压缩输出格式中不会保留。
强制注释
1
2
3
/*!
* 强制注释内容
*/
表示强制保留注释内容，不管输出什么格式。
3.2 变量
SASS 中的所有变量都是以 $ 开头，后紧跟变量名称，变量名与变量值之间以冒号（:）分隔开：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$width : 180px;
$bgColor : #eaeaea;
.container {
width: $width;
background-color: $bgColor;
height: 360px;
border:1px solid;
}
.box {
width: $width;
height:230px;
}
.cube {
background-color: $bgColor;
border: 1px solid;
}
生成的 CSS 文件为：
1
2
3
4
5
.container { width: 180px; background-color: #eaeaea; height: 360px; border: 1px solid; }
.box { width: 180px; height: 230px; }
.cube { background-color: #eaeaea; border: 1px solid; }
如果变量需要镶嵌在字符串之中，需要写在 #{} 之中，如：
1
2
3
4
5
6
7
8
9
10
$l : left;
$r : right;
.box {
margin-#{$l}: 30px;
}
.container {
margin-#{$r}: 20px;
}
生成的 CSS 文件为：
1
2
3
.box { margin-left: 30px; }
.container { margin-right: 20px; }
3.3 嵌套
选择器嵌套
scss 文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#container {
.title {
width:300px;
height:200px;
border:1px solid #ccc;
}
.main_body{
width:250px;
height:350px;
border:1px solid #ccc;
border-radius:5px;
}
}
超级链接伪类样式的设计，SASS 中可以通过 & 符号引用父属性：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
a {
&:link {
text-decoration: none;
color: black;
}
&:visited {
text-decoration: none;
color: black;
}
&:hover {
text-decoration: underline;
color: red;
}
&:active {
text-decoration: underline;
color: gray;
font-size: 18px;
}
}
属性嵌套
scss 文件：
1
2
3
4
5
6
7
8
#container {
background: {
color : #ccc;
image : url(imgs/001.png);
position: top left;
repeat: no-repeat;
}
}
属性嵌套使用得相对较少一些。
3.4 代码重用
Mixin 混合
Mixin 类似于宏命令，可以实现代码块重用，使用 @mixin 命令定义代码块：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@mixin left-block {
width: 360px;
line-height: 30px;
background: #ccc;
}
.left_side_nav {
@include left-block;
}
.left_side_fav {
@include left-block;
color : red;
font-size: 12px;
}
使用 @include 命令复用代码块。
@mixin 可以使用参数与默认值：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@mixin left-block($width:300px) {
width: $width;
line-height: 30px;
background: #ccc;
}
.left_side_nav {
@include left-block(200px);
}
.left_side_fav {
@include left-block;
color : red;
font-size: 12px;
}
当使用 @include 调用代码块复用时，如果不使用默认值，则直接传递实际值即可，如果不传递值，则使用默认值，上述示例编译成 CSS：
1
2
3
.left_side_nav { width: 200px; line-height: 30px; background: #ccc; }
.left_side_fav { width: 300px; line-height: 30px; background: #ccc; color: red; font-size: 12px; }
extend 继承/扩展
也可使用继承/扩展来减少重复代码实现代码重用，可以让一个选择器去继承另一个选择中所有的样式，使用命令 @extend：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.left-block {
width: 300px;
line-height: 30px;
background: #ccc;
}
.left_side_nav {
@extend .left-block;
}
.left_side_fav {
@extend .left-block;
color : red;
font-size: 12px;
}
import 导入
可使用 @import 命令导入外部文件，外部文件可以是 .scss 文件，也可以是 .css 文件，但当导入 .css 文件时，相当于是 CSS 中的 @import 命令：
1
2
3
4
5
6
@import 'plugin.scss';
@import '../css/style.css';
.cube {
color:red;
}
生成的 CSS：
1
2
3
4
@import url(../css/style.css);
.box { width: 300px; height: 200px; background: #ccc; }
.cube { color: red; }
4. 流程控制指令
@if
条件控制指令，类似于 JavaScript 中的简单 if 结构，即当 if 条件满足时执行指定的表达式，语法结构为：
1
2
3
@if 条件 {
// 条件为真时执行的样式
}
当然有 @if 就有配套的 @else，与 JavaScript 中的 if-else 是一个道理：
1
2
3
4
5
@if 条件 {
// 条件为真时执行的样式
} @else {
// 条件为假时执行的样式
}
示例：
1
2
3
4
5
6
7
8
9
10
11
$width : 360px;
.container {
@if $width / 3 > 100 {
border: 1px solid;
padding: 10px;
} @else {
border:5px solid;
padding:20px;
}
}
@for
循环控制指令，类似于 JavaScript 中的 for 循环结构。语法：
1
2
3
@for $var from <start> to <end> {
// 循环体
}
示例：
1
2
3
@for $var from 1 to 10 {
.m-#{$var} {margin: #{$var}px;}
}
生成 .m-1、.m-2 …… .m-10 10个样式。
@while
类似于 JavaScript 中的 while 循环，语法：
1
2
3
@while 条件 {
// 循环体
}
示例：
1
2
3
4
5
6
$i : 10;
@while $i > 0 {
.p-#{$i} {padding: #{$i}px};
$i : $i - 2;
}
@each
@each 与 @for 类似，语法结构为：
1
@each $var in <list>
@each 常用于列表或映射数据的循环，示例：
1
2
3
4
5
6
7
$list : info warning debug error;
@each $var in $list {
.icon-#{$var} {
background-image:url(imgs/#{$var}.png);
}
}
5. 函数
函数的功能主要是数据的运算，SASS 中可以将一些值交给函数进行处理，具体的处理方式由定义的函数具体的设计确定。
自定义函数的语法结构为：
1
2
3
@function 函数名称(参数列表){
// 数据处理
}
示例：
1
2
3
4
5
6
7
8
9
$colors : (light:#fff, dark:#000, gray:#ccc);
@function color($name) {
@return map-get($colors, $name);
}
.container {
background-color: color(gray);
}
map-get($colors, $name) 的作用是获取 $colors 中名称为 $name 的值，变量 $colors 是一个 map 集合，保存的是名值对。
6. 小结
本文将 SASS 使用过程中常用用法做了简单的总结，日常开发一般就不需要再去查官方文档了，如果有更深层次的使用或对某个用法不熟悉，也可查询官方文档，详情见：http://sass-lang.com/documentation/file.SASS_REFERENCE.html。