五、高级用法
最后更新于：2022-04-01 06:11:06
## 5.1 条件语句
@if可以用来判断：
> p {
> @if 1 + 1 == 2 { border: 1px solid; }
> @if 5 < 3 { border: 2px dotted; }
> }
配套的还有@else命令：
> @if lightness($color) > 30% {
> background-color: #000;
> } @else {
> background-color: #fff;
> }
## 5.2 循环语句
SASS支持for循环：
> @for $i from 1 to 10 {
> .border-#{$i} {
> border: #{$i}px solid blue;
> }
> }
也支持while循环：
> $i: 6;
>
> @while $i > 0 {
> .item-#{$i} { width: 2em * $i; }
> $i: $i - 2;
> }
each命令，作用与for类似：
> @each $member in a, b, c, d {
> .#{$member} {
> background-image: url("/image/#{$member}.jpg");
> }
> }
## 5.3 自定义函数
SASS允许用户编写自己的函数。
> @function double($n) {
> @return $n * 2;
> }
>
> #sidebar {
> width: double(5px);
> }
（完）