流程语句
循环语句
for...from...through...循环。当需要聚合伪类 :nth-* 的时候，使用 @for 循环很有用。除了这些使用场景，如果必须迭代最好还是使用下面的 @each 循环。
@for $i from 1 through 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
each...in...命令，作用与for类似，属于最常用的。each后面紧跟的是枚举变量，in后面紧跟的是原列表（或原map）。
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
@each $member in $members {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
while循环，简单说，当上面两种不能满足要求的时候再用它。
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
条件语句
就是@if和@else了，用法同编程语言。测试一个错误值时，通常使用 not 关键字而不是比较与 false 或 null 等值。
@if not index($list, $item) {
// …
}
轻易不要使用条件语句。
函数
Sass允许用户自定义函数：
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
颜色函数
SASS提供了一些内置的颜色函数，以便生成系列颜色。具体看http://www.w3cplus.com/preprocessor/sass-color-function.html
最好使用 mix(..) 替代 darken(..) 和 lighten(..)。通过混合白色 或 黑色实现变量或变暗的 mix
函数，是一个不错的方法。
lighten(#cc3, 10%) // #d6d65c，减淡百分之十
darken(#cc3, 10%) // #a3a329，加深百分之十
grayscale(#cc3) // #808080
complement(#cc3) // #33c，这是反色
组件
具体参考：https://sass-guidelin.es/zh/#section-33
- 可以做一件事，只做一件；
- 在整个项目中可以重用，具有可复用性；
- 各自独立。
例如，搜索框就应该被视为一个组件，可以在不同位置、不同页面、多种环境下重复使用。它不应该受限于 DOM 中的位置（页脚、侧边栏、主内容区…）。
几乎所有的接口都可以被视为小组件，而且强烈建议坚持这种模式。这不仅仅会精简整个项目中 CSS 的代码量，而且也会比维护一个到处无逻辑的烂摊子容易得多。
媒体查询用法
.foo {
color: red;
@include respond-to('medium') {
color: blue;
}
}
生成
.foo {
color: red;
}
@media (min-width: 800px) {
.foo {
color: blue;
}
}
