SASS 官方文档速通

前言：参考 Sass 中文网。

一. 特色功能

Sass 是一款强化 CSS 的辅助工具，在 CSS 语法的基础上增加了变量、嵌套、混合、导入等高级功能。有助于组织管理样式文件，更高效地开发项目。

 二. 语法格式

.scss 拓展名：在 CSS3 语法的基础上进行拓展。

.sass 拓展名：用 “缩进” 代替 “花括号” ，用 “换行” 代替 “分号” 。

 三. 用法

1. 注释 /* */ 与 //

多行注释 /* */，单行注释 //，前者会被输出到编译后的 CSS 文件中，而后者则不会，例如：

/* This comment is* several lines long.* since it uses the CSS comment syntax,* it will appear in the CSS output. */
body {color: black;
}
// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a {color: green;
}// 编译后
/* This comment is* several lines long.* since it uses the CSS comment syntax,* it will appear in the CSS output. */
body {color: black;
}
a {color: green;
}

2. 嵌套

2.1 嵌套规则

避免重复输入父选择器，令复杂的 CSS 结构易于管理。

#main p {color: #00ff00;width: 97%;.redbox {background-color: #ff0000;color: #000000;}
}// 编译后
#main p {color: #00ff00;width: 97%;
}
#main p .redbox {background-color: #ff0000;color: #000000;
}

2.2 父选择器 &

在嵌套 CSS 中，访问外层的父选择器，使用 & 代表外层的父选择器。

a {font-weight: bold;text-decoration: none;&:hover {text-decoration: underline;}body.firefox & {font-weight: normal;}
}// 编译后
a {font-weight: bold;text-decoration: none;
}
a:hover {text-decoration: underline;
}
body.firefox a {font-weight: normal;
}

2.3 属性嵌套

如 font-family, font-size, font-weight 。为了便于管理，避免重复输入。可以这样写：

.funky {font: {family: fantasy;size: 30em;weight: bold;}
}// 编译后
.funky {font-family: fantasy;font-size: 30em;font-weight: bold;
}

3 变量 $

以 $ 开头定义变量：

// 定义
$width: 5em;// 使用
#main {width: $width;
}

块级变量可以通过 !global 升级为全局变量：

#main {$width: 5em !global;width: $width;
}
#sidebar {width: $width;
}// 编译后
#main {width: 5em;
}
#sidebar {width: 5em;
}

4. 插值语句 #{}

通过 #{} 可以在选择器或属性名中使用变量：

$name: foo;
$attr: border;
p.#{$name} {#{$attr}-color: blue;
}// 编译后
p.foo {border-color: blue;
}

5. @import 导入

Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。可以使用导入文件的变量和混合指令(mixin)。

@import "foo.scss";

嵌套 @import

.example {color: red;
}
#main {@import "example";
}// 编译后
#main .example {color: red;
}

6. @extend 继承

一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。提取出公用样式，然后使用 @extend 继承。

.error {border: 1px #f00;background-color: #fdd;
}
.error.intrusion {background-image: url("/image/hacked.png");
}
.seriousError {@extend .error;border-width: 3px;
}// 编译后
.error,
.seriousError {border: 1px #f00;background-color: #fdd;
}
.error.intrusion,
.seriousError.intrusion {background-image: url("/image/hacked.png");
}
.seriousError {border-width: 3px;
}

7. @if 条件

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：

p {@if 1 + 1 == 2 {border: 1px solid;}@if 5 < 3 {border: 2px dotted;}@if null {border: 3px double;}
}// 编译后
p {border: 1px solid;
}

@if 后可以跟多个 @else if ，或 @else 。如果 @if 失败，Sass 将逐条执行 @else if ，如果全失败，则执行 @else 声明，例如：

$type: monster;
p {@if $type == ocean {color: blue;} @else if $type == matador {color: red;} @else if $type == monster {color: green;} @else {color: black;}
}// 编译后
p {color: green;
}

8. @for 循环

@for 指令可以在限制的范围内重复输出格式。

@for $i from 1 through 3 {.item-#{$i} {width: 2em * $i;}
}// 编译后
.item-1 {width: 2em;
}
.item-2 {width: 4em;
}
.item-3 {width: 6em;
}

9. @each 循环

@each 遍历的是一连串的值，也就是值列表。

@each $animal in puma, sea-slug, egret, salamander {.#{$animal}-icon {background-image: url("/images/#{$animal}.png");}
}// 编译后
.puma-icon {background-image: url("/images/puma.png");
}
.sea-slug-icon {background-image: url("/images/sea-slug.png");
}
.egret-icon {background-image: url("/images/egret.png");
}
.salamander-icon {background-image: url("/images/salamander.png");
}

10. @while 循环

@while 指令重复输出直到返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。例如：

$i: 6;
@while $i > 0 {.item-#{$i} {width: 2em * $i;}$i: $i - 2;
}// 编译后
.item-6 {width: 12em;
}
.item-4 {width: 8em;
}
.item-2 {width: 4em;
}

11. @mixin 混合指令

混合指令（Mixin）用于定义可重复使用的样式。

11.1 @mixin 定义、@include 引入

@mixin large-text {font: {family: Arial;size: 20px;weight: bold;}color: #ff0000;
}
.page-title {@include large-text;padding: 4px;margin-top: 10px;
}// 编译后
.page-title {font-family: Arial;font-size: 20px;font-weight: bold;color: #ff0000;padding: 4px;margin-top: 10px;
}

11.2 参数

参数用于给混合指令中的样式设定变量。

@mixin sexy-border($color, $width) {border: {color: $color;width: $width;style: dashed;}
}
p {@include sexy-border(blue, 1in);
}// 编译后
p {border-color: blue;border-width: 1in;border-style: dashed;
}

11.3 参数变量

不确定混合指令需要多少参数，可以使用参数变量 … 声明

```scss
@mixin box-shadow($shadows...) {-moz-box-shadow: $shadows;-webkit-box-shadow: $shadows;box-shadow: $shadows;
}
.shadows {@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}// 编译后
.shadowed {-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

12. @function 函数

$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar {width: grid-width(5);
}// 编译后
#sidebar {width: 240px;
}