颜色函数：

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