SASS 控制指令详解@for、@if、@each、@while

SASS 控制指令详解

SASS 提供了多种控制指令，如 @for、@if 和 @each，这些指令可以让你在样式表中编写更复杂和动态的逻辑。下面分别详细介绍这些指令的使用方法和示例。

1. @for 循环

@for 循环用于生成一系列重复的样式规则。它可以有两种形式：from ... through 和 from ... to。

@for $variable from <start> through <end> {
  // 循环体
}

@for $variable from <start> to <end> {
  // 循环体
}
/* 
$variable：循环变量。
<start>：循环的起始值。
<end>：循环的结束值（包含在内）。
 */

• from ... through：包含结束值。
• from ... to：不包含结束值。

示例

// 生成一系列边框半径类
@for $i from 2 through 20 {
  .br-#{$i*2} {
    border-radius: 2rpx * $i;
  }
}

// 生成一系列宽度类
@for $i from 1 to 11 {
  .w-#{$i*10} {
    width: 10% * $i;
  }
}

 编译后的 CSS

/* 圆角 */
.br-4 {
  border-radius: 4rpx;
}

.br-6 {
  border-radius: 6rpx;
}

/* ...省略中间部分... */

.br-40 {
  border-radius: 40rpx;
}

/*宽*/

.w-10 {
  width: 10%;
}

.w-20 {
  width: 20%;
}

/* ...省略中间部分... */

.w-100 {
  width: 100%;
}

2. @if 条件语句

@if 语句用于根据条件生成不同的样式规则。可以与 @else if 和 @else 一起使用。

@if <condition> {
  // 条件为真时的样式
}
@else if <condition> {
  // 条件为真时的样式
}
@else {
  // 所有条件都不为真时的样式
}

示例

$theme: light;

body {
  @if $theme == light {
    background-color: white;
    color: black;
  } @else if $theme == dark {
    background-color: black;
    color: white;
  } @else {
    background-color: gray;
    color: black;
  }
}

编译后的 CSS

body {
  background-color: white;
  color: black;
}

3. @each 循环

@each 循环用于遍历列表或映射（map），并为每个项生成样式规则。

@each $variable in <list-or-map> {
  // 循环体
}

示例

// 遍历颜色列表
$colors: red, green, blue;

@each $color in $colors {
  .bg-#{$color} {
    background-color: $color;
  }
}

// 遍历映射
$breakpoints: (
  small: 480px,
  medium: 768px,
  large: 1024px
);

@each $name, $width in $breakpoints {
  @media (min-width: $width) {
    .#{$name}-screen {
      width: 100%;
    }
  }
}

编译后的 CSS

.bg-red {
  background-color: red;
}

.bg-green {
  background-color: green;
}

.bg-blue {
  background-color: blue;
}

@media (min-width: 480px) {
  .small-screen {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .medium-screen {
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .large-screen {
    width: 100%;
  }
}

4. @while 指令

@while 指令在 SASS 中用于创建基于条件的循环。与 @for 不同，@while 循环会一直执行，直到指定的条件不再满足为止。这使得 @while 在某些情况下非常有用，尤其是在需要动态生成不确定数量的样式规则时。

$variable: initial-value;

@while <condition> {
  // 循环体
  // 更新变量
}

• $variable：初始化变量(就是个变量名，可以是任何名字，例如 aa,bb,cc)。
• <condition>：循环条件，当条件为真时继续执行循环体。
• 更新变量：在循环体中更新变量的值，以确保最终能够退出循环。

 示例

生成一系列背景颜色

假设我们想生成一系列带有不同背景颜色的类，每种颜色的透明度逐渐增加。

$i: 1;
$opacity-step: 0.1;
/* 声明两个变量 */

@while $i <= 10 {
  .bg-#{$i} {
                                 /* 让$1 * $opacity-step */
    background-color: rgba(0, 0, 255, $i * $opacity-step);
  }
  $i: $i + 1;
  /* 让$1 每次循环 +1 */
}

 编译后的 CSS

.bg-1 {
  background-color: rgba(0, 0, 255, 0.1);
}

.bg-2 {
  background-color: rgba(0, 0, 255, 0.2);
}

.bg-3 {
  background-color: rgba(0, 0, 255, 0.3);
}

/* ... */

.bg-10 {
  background-color: rgba(0, 0, 255, 1);
}

假设我们想生成一系列宽度类，每个类的宽度逐渐增加。

$i: 1;
$width-step: 10%;

@while $i <= 10 {
  .w-#{$i} {
    width: $i * $width-step;
  }
  $i: $i + 1;
}

编译后的 CSS

.w-1 {
  width: 10%;
}

.w-2 {
  width: 20%;
}

.w-3 {
  width: 30%;
}

/* ... */

.w-10 {
  width: 100%;
}

注意事项

• 更新变量：在 @while 循环中，必须确保在每次迭代中更新条件变量，否则可能会导致无限循环。
• 条件表达式：条件表达式必须返回一个布尔值（真或假），通常使用比较运算符（如 <=、>=、== 等）。

总结

• @for 循环：用于生成一系列重复的样式规则，支持 from ... through 和 from ... to 两种形式。
• @if 条件语句：根据条件生成不同的样式规则，可以与 @else if 和 @else 一起使用。
• @each 循环：用于遍历列表或映射，并为每个项生成样式规则。
• @while 循环：用于创建基于条件的循环，直到条件不再满足为止。
• 语法：@while <condition> { ... }
• 示例：生成一系列背景颜色和宽度类。
• 注意事项：确保在每次迭代中更新条件变量，避免无限循环。