循环 @while

约 1037 字大约 3 分钟

2025-04-11

在 Sass 中，@while 是一个控制指令，用于根据条件表达式重复执行代码块，直到条件变为 false。它类似于其他编程语言中的 while 循环，但由于 Sass 是预处理器语言，@while 的使用场景相对较少（通常更推荐使用 @each 或 @for）。以下是详细介绍：

一、`@while` 的核心特性

条件循环：重复执行代码块直到条件不满足。
灵活性：适合处理复杂的循环逻辑（如动态终止条件）。
潜在风险：若条件始终为 true，会导致无限循环和编译失败。

二、基本语法

@while <条件表达式> {
  // 循环体代码
  // 需在循环体内修改条件变量，否则会无限循环！
}

三、基础用法与示例

根据动态条件，批量生成类名（如 .item-1 到 .item-5）：

$counter: 1;
$max: 5;

@while $counter <= $max {
  .item-#{$counter} {
    width: 20px * $counter;
  }
  $counter: $counter + 1; // 必须修改条件变量！
}

编译后：

.item-1 {
  width: 20px;
}
.item-2 {
  width: 40px;
}
.item-3 {
  width: 60px;
}
.item-4 {
  width: 80px;
}
.item-5 {
  width: 100px;
}

四、高级用法与场景

1、结合复杂条件生成复杂样式

根据多个变量动态生成间距工具类：

$base-size: 4;
$multiplier: 1;

@while $multiplier <= 3 {
  .spacing-#{$base-size * $multiplier} {
    padding: $base-size * $multiplier * 1px;
  }
  $multiplier: $multiplier + 1;
}

编译后：

.spacing-4 {
  padding: 4px;
}
.spacing-8 {
  padding: 8px;
}
.spacing-12 {
  padding: 12px;
}

2. 动态生成渐变类名

生成 .opacity-10 到 .opacity-100（步长 10）：

$opacity: 10;

@while $opacity <= 100 {
  .opacity-#{$opacity} {
    opacity: $opacity * 0.01;
  }
  $opacity: $opacity + 10;
}

编译后：

.opacity-10 {
  opacity: 0.1;
}
.opacity-20 {
  opacity: 0.2;
}
/* ...直到 .opacity-100 */

五、关键注意事项

1、避免无限循环

必须控制条件变量，避免死循环，导致编译错误：

// 错误示例：条件变量未修改
$flag: true;
@while $flag {
  .box {
    color: red;
  }
  // 缺少 $flag: false;
}

2、性能问题

避免复杂逻辑：Sass 是预处理器，循环次数过多或逻辑复杂会显著降低编译速度。

3、作用域限制

循环内定义的变量不会污染外部作用域：

$counter: 1;
@while $counter <= 3 {
  $temp: $counter * 10; // 仅在循环内有效
  .item-#{$counter} {
    width: $temp + px;
  }
  $counter: $counter + 1;
}
// 外部无法访问 $temp

六、`@while` 与其他循环指令对比

指令	适用场景	特点	示例
`@while`	动态终止条件的复杂循环逻辑	灵活性高，但需手动控制终止条件	根据变量动态生成类名
`@for`	按固定数字范围循环（如 1 到 5）	简洁，无需手动管理索引	栅格系统、序列化类名
`@each`	遍历列表或映射中的元素	适合处理集合数据	主题色、响应式断点

七、实际应用场景

1、动态生成工具类

生成不同比例的宽高类（如 .w-25、.w-50）：

$percentage: 25;

@while $percentage <= 100 {
  .w-#{$percentage} {
    width: $percentage * 1%;
  }
  .h-#{$percentage} {
    height: $percentage * 1%;
  }
  $percentage: $percentage + 25;
}

2、数学计算场景

生成斐波那契数列样式：

$a: 0;
$b: 1;
$count: 1;

@while $count <= 5 {
  .fib-#{$count} {
    width: $b * 1px;
  }
  $temp: $a + $b;
  $a: $b;
  $b: $temp;
  $count: $count + 1;
}

编译后：

.fib-1 {
  width: 1px;
}
.fib-2 {
  width: 1px;
}
.fib-3 {
  width: 2px;
}
.fib-4 {
  width: 3px;
}
.fib-5 {
  width: 5px;
}

八、最佳实践

优先使用 @each 或 @for
除非需要动态终止条件，否则应选择更简洁的循环指令。
明确终止条件
确保循环体内修改条件变量，避免无限循环。
保持循环体简洁
将复杂逻辑封装到混合宏或函数中，提升可读性。
注释说明逻辑
对于复杂 @while 循环，添加注释解释终止条件和循环目的。

九、总结

核心特性	说明
灵活性	适合动态终止条件和复杂逻辑的循环
风险点	需手动控制终止条件，否则可能导致无限循环
适用场景	动态生成工具类、数学计算、复杂条件迭代
替代方案	优先使用 `@each`（遍历集合）或 `@for`（固定范围循环）

合理使用 @while 可以处理一些特殊场景，但在大多数情况下，Sass 的 @each 和 @for 更简洁高效。

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24