@media

• Sass 中 @media 指令與 CSS 中用法一樣
• 如果 @media 嵌套在 CSS 規(guī)則內(nèi)，編譯時，@media 將被編譯到文件的最外層，包含嵌套的父選擇器
• @media 的 queries 允許互相嵌套使用，編譯時，Sass 自動添加 and
• @media 甚至可以使用 SassScript（比如變量，函數(shù)，以及運算符）代替條件的名稱或者值

@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調(diào)試

@debug 10em + 12em;
編譯為
Line 1 DEBUG: 22em

函數(shù)指令

$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"
  },

• 有些語法可能和版本問題有關(guān)