成长（18/2000）——SASS2

@media

• Sass 中 @media 指令与 CSS 中用法一样
• 如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器
• @media 的 queries 允许互相嵌套使用，编译时，Sass 自动添加 and
• @media 甚至可以使用 SassScript（比如变量，函数，以及运算符）代替条件的名称或者值

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}
编译为
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
 } 
}

!optional

@at-root （ @at-root (without: ...) and @at-root (with: ...)）

• 将后面的选择器提升到根部

.parent {
  ...
  @at-root .child { ... }
}
编译后
.parent { ... }
.child { ... }

@debug @warn @error

• @debug调试

@debug 10em + 12em;
编译为
Line 1 DEBUG: 22em

函数指令

$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;
 }

拓展

• node-sass

 "scripts": {
    "dev:sass": "node-sass --watch --recursive -- output css --source-map 
      true --source-map-content"
  },

• 有些语法可能和版本问题有关