颜色函数：
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
循环
1. @for
@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>。
区别：
through：包含 <start> 与 <end> 的值；
to：只包含 <start> 的值不包含 <end> 的值
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
2. @each
@each 指令的格式是 $var in <list>, $var 可以是任何变量名，比如$length或者 $name，而 <list> 是一连串的值，也就是值列表。
@each 将变量 $var作用于值列表中的每一个项目，然后输出结果，例如：
@each $type in info, danger, warning, success,primary {
.pango-link--#{$type}{
color: var(--link-#{$type}-color);
&:hover{
opacity: 0.8;
&::after{
background:var(--link-#{$type}-color);
}
}
}
}
3. @while
@while 指令重复输出格式直到表达式返回结果为false。这样可以实现比 @for 更复杂的循环，只是很少会用到。例如：
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
判断
@if
当 @if 的表达式返回值不是false 或者 null 时，条件成立，输出 {} 内的代码。@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明，例如：
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
