@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 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;
}
拓展
"scripts": {
"dev:sass": "node-sass --watch --recursive -- output css --source-map
true --source-map-content"
},
