Sass常用指令

@if / @else / @esle if

这个跟 JavaScript 一样，没什么好说的，用就完事了 😎

@if $variable {
	do something...
} @else if $variable === 'string' {
	do another thing...
} @else {
	do default...
}

@each

这个指令是配合内置模块 list 或者 map 去使用的， 通过遍历 list 的内容去生成 style 或者返回一些信息。

// list
$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    // 则 .icon-40px, icon-50px, icon-80px
    font-size: $size;
    height: $size;
    width: $size;
  }
}

// map
$icons: (
  'eye': '\f112',
  'start': '\f12e',
  'stop': '\f12f',
);

@each $name, $glyph in $icons {
  .icon-#{$name}:before {
    // 则 eye, start, stop
    display: inline-block;
    font-family: 'Icon Font';
    content: $glyph; // \f112, \f12e, \f12f
  }
}

@for

这个指令相对于 JavaScript 就鸡肋了一点，只是遍历数字，但可以配合 JavaScript 的生成的元素相集合得到意想不到的结果。

其中有 from .. through 和 from ... to，两者的区别是 to 是< through 是 ≤

from 1 through 3 → for (let i = 1; i ≤ 3; i++)

from 1 to 3 → for (let i = 1; i < 3; i++)

$base-color: #036;

@for $i from 1 through 3 {
  ul:nth-child(3n + #{$i}) {
    background-color: lighten($base-color, $i * 5%);
  }
}

// 编译成css
ul:nth-child(3n + 1) {
  background-color: #004080;
}

ul:nth-child(3n + 2) {
  background-color: #004d99;
}

ul:nth-child(3n + 3) {
  background-color: #0059b3;
}

@while

这个跟 JavaScript 一样，没什么好说的，冲就完事了。小心死循环！

@function

这是一个定义 sass 函数的方式，配合@return 来返回值，跟 JavaScript 也差不多

@function sum($numbers...) {
  $sum: 0;
  @each $number in $numbers {
    $sum: $sum + $number;
  }
  @return $sum;
}

.micro {
  width: sum(50px, 30px, 100px);
}

// 编译成css
.micro {
  width: 180px;
}