功能有很多，这边只列举一些比较常用的。

嵌套规则 (Nested Rules)

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。

编译前

  1. .box {
  2.     .box1 {
  3.         background-color: red;
  4.     }
  6.     .box2 {
  7.         background-color: blueviolet;
  8.     }
  9. }

编译后

  1. .box .box1 {
  2.     background-color: red;
  3. }
  4. .box .box2 {
  5.     background-color: blueviolet;
  6. }
  7. .box .box3 {
  8.     background-color: blue;
  9. }

父选择器 & (Referencing Parent Selectors: &)

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器。

编译前

  1. button {
  2.     width: 100px;
  3.     height: 30px;
  5.     &:hover {
  6.         background-color: red;
  7.     }
  8. }

编译后

  1. button {
  2.     width: 100px;
  3.     height: 30px;
  4. }
  5. button:hover {
  6.     background-color: red;
  7. }

属性嵌套 (Nested Properties)

有些 CSS 属性遵循相同的命名空间 ( namespace )，比如 font-family , font-size , font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中。

编译前

  1. .my-content {
  2.     padding: {
  3.         top: 10px;
  4.         right: 10px;
  5.         bottom: 10px;
  6.         left: 10px;
  7.     }
  9.     font: {
  10.         size: 30px;
  11.         weight: bold;
  12.     }
  13. }

编译后

  1. .my-content {
  2.     padding-top: 10px;
  3.     padding-right: 10px;
  4.     padding-bottom: 10px;
  5.     padding-left: 10px;
  6.     font-size: 30px;
  7.     font-weight: bold;
  8. }

注释 / / 与 // (Comments: / / and //)

单行注释不会被编译到 css 文件中，多行注释中可以使用差值语句 “``” ，类型 ES6 的模板字符串。

编译前

  1. // These comments are only one line long each.
  2. // They won't appear in the CSS output,
  3. // since they use the single-line comment syntax.
  5. .my-content {
  6.     width: 100%;
  7.     height: 100%;
  8. }

编译后

  1. .my-content {
  2.     width: 100%;
  3.     height: 100%;
  4. }

编译前2

  1. /* This comment is
  2.  * several lines long.
  3.  * since it uses the CSS comment syntax,
  4.  * it will appear in the CSS output. */
  6. .my-content {
  7.     width: 100%;
  8.     height: 100%;
  9. }

编译后2

  1. /* This comment is
  2.  * several lines long.
  3.  * since it uses the CSS comment syntax,
  4.  * it will appear in the CSS output. */
  5. .my-content {
  6.     width: 100%;
  7.     height: 100%;
  8. }

变量 $ (Variables: $)

编译前

  1. $width: 100px;
  2. $height: 100px;
  4. .box {
  5.     width: $width;
  6.     height: $height;
  7. }

编译后

  1. .box {
  2.     width: 100px;
  3.     height: 100px;
  4. }

运算 (Operations)

编译前

  1. .box {
  2.     width: 100px + 100px;
  3.     height: 200px / 2;
  4.     background-color: royalblue;
  5. }

编译后

  1. .box {
  2.     width: 200px;
  3.     height: 100px;
  4.     background-color: royalblue;
  5. }

插值语句 #{} (Interpolation: #{})

编译前

  1. $name: box;
  2. $attr: background;
  4. .box {
  5.     .#{$name}1 {
  6.         width: 100px;
  7.         height: 100px;
  8.         #{$attr}-color: red;
  9.     }
  11.     .#{$name}2 {
  12.         width: 100px;
  13.         height: 100px;
  14.         #{$attr}-color: blueviolet;
  15.     }
  17.     .#{$name}3 {
  18.         width: 100px;
  19.         height: 100px;
  20.         #{$attr}-color: blue;
  21.     }
  22. }

编译后

  1. .box .box1 {
  2.     width: 100px;
  3.     height: 100px;
  4.     background-color: red;
  5. }
  6. .box .box2 {
  7.     width: 100px;
  8.     height: 100px;
  9.     background-color: blueviolet;
  10. }
  11. .box .box3 {
  12.     width: 100px;
  13.     height: 100px;
  14.     background-color: blue;
  15. }

@import

Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 ( mixin ) 都可以在导入的文件中使用。

编译前（base.scss）

  1. @import './reset.scss';
  3. .box {
  4.     .#{$name}1 {
  5.         width: 100px;
  6.         height: 100px;
  7.         #{$attr}-color: red;
  8.     }
  10.     .#{$name}2 {
  11.         width: 100px;
  12.         height: 100px;
  13.         #{$attr}-color: blueviolet;
  14.     }
  16.     .#{$name}3 {
  17.         width: 100px;
  18.         height: 100px;
  19.         #{$attr}-color: blue;
  20.     }
  21. }

编译前（reset.scss）

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  6. $name: box;
  7. $attr: background;

编译后（base.css）

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  6. .box .box1 {
  7.     width: 100px;
  8.     height: 100px;
  9.     background-color: red;
  10. }
  11. .box .box2 {
  12.     width: 100px;
  13.     height: 100px;
  14.     background-color: blueviolet;
  15. }
  16. .box .box3 {
  17.     width: 100px;
  18.     height: 100px;
  19.     background-color: blue;
  20. }

嵌套 @import

编译前（base.scss）

  1. .box {
  2.     @import 'box';
  3. }

编译前（box.scss）

  1. .box1 {
  2.     width: 100px;
  3.     height: 100px;
  4.     background-color: red;
  5. }
  7. .box2 {
  8.     width: 100px;
  9.     height: 100px;
  10.     background-color: blue;
  11. }
  13. .box3 {
  14.     width: 100px;
  15.     height: 100px;
  16.     background-color: blueviolet;
  17. }

编译后（base.css）

  1. .box .box1 {
  2.     width: 100px;
  3.     height: 100px;
  4.     background-color: red;
  5. }
  6. .box .box2 {
  7.     width: 100px;
  8.     height: 100px;
  9.     background-color: red;
  10. }
  11. .box .box3 {
  12.     width: 100px;
  13.     height: 100px;
  14.     background-color: red;
  15. }

@extend

编译前

  1. .box {
  2.     width: 100px;
  3.     height: 100px;
  4. }
  6. .box {
  7.     .box1 {
  8.         @extend .box;
  10.         background-color: red;
  11.     }
  13.     .box2 {
  14.         @extend .box;
  16.         background-color: blueviolet;
  17.     }
  19.     .box3 {
  20.         @extend .box;
  22.         background-color: blue;
  23.     }
  24. }

编译后

  1. .box,
  2. .box .box1,
  3. .box .box2,
  4. .box .box3 {
  5.     width: 100px;
  6.     height: 100px;
  7. }
  9. .box .box1 {
  10.     background-color: red;
  11. }
  12. .box .box2 {
  13.     background-color: blueviolet;
  14. }
  15. .box .box3 {
  16.     background-color: blue;
  17. }

@if

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

编译前

  1. $type: monster;
  3. p {
  4.     @if $type == ocean {
  5.         color: blue;
  6.     } @else if $type == matador {
  7.         color: red;
  8.     } @else if $type == monster {
  9.         color: green;
  10.     } @else {
  11.         color: black;
  12.     }
  13. }

编译后

  1. p {
  2.     color: green;
  3. }

@for

@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from through ，或者 @for $var from to 。

区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 与 的值，而使用 to 时条件范围只包含 的值不包含 的值。另外， $var 可以是任何变量，比如 $i ； 和 必须是整数值。

编译前

  1. @for $i from 1 through 3 {
  2.     .item-#{$i} {
  3.         width: 2em * $i;
  4.     }
  5. }

编译后

  1. .item-1 {
  2.     width: 2em;
  3. }
  5. .item-2 {
  6.     width: 4em;
  7. }
  9. .item-3 {
  10.     width: 6em;
  11. }

@each

@each 指令的格式是 $var in , $var 可以是任何变量名，比如 $length 或者 $name，而 是一连串的值，也就是值列表。@each是一个循环语句，$key、$value、相当于 javascript 中的对象键值对，名字可以自定义。

编译前

  1. @each $key, $value in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  2.     #{$key} {
  3.         font-size: $value;
  4.     }
  5. }

编译后

  1. h1 {
  2.     font-size: 2em;
  3. }
  5. h2 {
  6.     font-size: 1.5em;
  7. }
  9. h3 {
  10.     font-size: 1.2em;
  11. }

@while

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

编译前

  1. $i: 3;
  2. @while $i > 0 {
  3.     .item-#{$i} {
  4.         width: 2em * $i;
  5.     }
  6.     $i: $i - 1;
  7. }

编译后

  1. .item-3 {
  2.     width: 6em;
  3. }
  5. .item-2 {
  6.     width: 4em;
  7. }
  9. .item-1 {
  10.     width: 2em;
  11. }

混合指令 @mixin & @include

使用 @mixin 指令定义混合样式，使用 @include 指令引用混合样式，格式是在其后添加混合名称，以及需要的参数（可选）。

编译前

  1. @mixin box {
  2.     width: 100px;
  3.     height: 100px;
  4. }
  6. .box {
  7.     .box1 {
  8.         @include box;
  10.         background-color: red;
  11.     }
  13.     .box2 {
  14.         @include box;
  16.         background-color: blueviolet;
  17.     }
  19.     .box3 {
  20.         @include box;
  22.         background-color: blue;
  23.     }
  24. }

编译后

  1. .box .box1 {
  2.     width: 100px;
  3.     height: 100px;
  4.     background-color: red;
  5. }
  6. .box .box2 {
  7.     width: 100px;
  8.     height: 100px;
  9.     background-color: blueviolet;
  10. }
  11. .box .box3 {
  12.     width: 100px;
  13.     height: 100px;
  14.     background-color: blue;
  15. }

参数 (Arguments)

参数用于给混合指令中的样式设定变量，并且赋值使用。在定义混合指令的时候，按照变量的格式，通过逗号分隔，将参数写进圆括号里。引用指令时，按照参数的顺序，再将所赋的值对应写进括号。

编译前

  1. @mixin box($color) {
  2.     width: 100px;
  3.     height: 100px;
  4.     background-color: $color;
  5. }
  7. .box {
  8.     .box1 {
  9.         @include box(red);
  10.     }
  12.     .box2 {
  13.         @include box(blueviolet);
  14.     }
  16.     .box3 {
  17.         @include box(blue);
  18.     }
  19. }

编译后

  1. .box .box1 {
  2.     width: 100px;
  3.     height: 100px;
  4.     background-color: red;
  5. }
  6. .box .box2 {
  7.     width: 100px;
  8.     height: 100px;
  9.     background-color: blueviolet;
  10. }
  11. .box .box3 {
  12.     width: 100px;
  13.     height: 100px;
  14.     background-color: blue;
  15. }

函数指令 (Function Directives)

Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用。

编译前

  1. @function box-width($width) {
  2.     @return $width * 2;
  3. }
  5. .box {
  6.     .box1 {
  7.         width: box-width(100px);
  8.         height: 100px;
  9.         background-color: red;
  10.     }
  12.     .box2 {
  13.         width: box-width(100px);
  14.         height: 100px;
  15.         background-color: blueviolet;
  16.     }
  18.     .box3 {
  19.         width: box-width(100px);
  20.         height: 100px;
  21.         background-color: blue;
  22.     }
  23. }

编译后

  1. .box .box1 {
  2.     width: 200px;
  3.     height: 100px;
  4.     background-color: red;
  5. }
  6. .box .box2 {
  7.     width: 200px;
  8.     height: 100px;
  9.     background-color: blueviolet;
  10. }
  11. .box .box3 {
  12.     width: 200px;
  13.     height: 100px;
  14.     background-color: blue;
  15. }