SASS @for 和 @while 规则

SASS 是一种 CSS 预处理器，它可以让我们编写更具可维护性和可重用性的 CSS 代码。SASS 中的 @for 和 @while 规则是其中两个基本的控制语句，它们可以帮助我们创建复杂的 CSS 样式。

@for 规则

@for 规则可以让我们循环一定次数，每次循环时都可以生成一个 CSS 样式。@for 规则的语法如下：

@for $i from <start> through <end> {
  // CSS 样式
}

其中：

• $i 是循环计数器变量，从 start 到 end 依次循环；
• start 是起始值；
• end 是结束值。

下面是一个例子，使用 @for 规则生成一组具有不同背景颜色的按钮样式：

@for $i from 1 through 5 {
  .button-#{$i} {
    background-color: rgba(0, 0, 0, 0.#{$i} * 25);
  }
}

上述代码将生成以下 5 个 CSS 样式：

.button-1 {
  background-color: rgba(0, 0, 0, 0.25);
}

.button-2 {
  background-color: rgba(0, 0, 0, 0.5);
}

.button-3 {
  background-color: rgba(0, 0, 0, 0.75);
}

.button-4 {
  background-color: rgba(0, 0, 0, 1);
}

.button-5 {
  background-color: rgba(0, 0, 0, 1);
}

@while 规则

@while 规则可以让我们在满足某个条件时不断循环，直到条件不再满足为止。@while 规则的语法如下：

@while <condition> {
  // CSS 样式
}

其中：

• <condition> 是循环条件表达式。

下面是一个例子，使用 @while 规则生成一组具有不同宽度的嵌套元素样式：

$i: 10;
@while $i > 0 {
  .box-#{$i} {
    width: #{$i}px;
  }
  $i: $i - 1;
}

上述代码将生成以下 10 个 CSS 样式：

.box-10 {
  width: 10px;
}

.box-9 {
  width: 9px;
}

.box-8 {
  width: 8px;
}

.box-7 {
  width: 7px;
}

.box-6 {
  width: 6px;
}

.box-5 {
  width: 5px;
}

.box-4 {
  width: 4px;
}

.box-3 {
  width: 3px;
}

.box-2 {
  width: 2px;
}

.box-1 {
  width: 1px;
}

小结

@for 和 @while 规则可以帮助我们编写更具可重用性的 CSS 代码。@for 规则可以循环一定次数生成 CSS 样式，而 @while 规则可以不断循环直到满足某个条件为止。

在实际开发中，可以将这些规则与其他 SASS 特性（如变量、函数等）结合使用，从而提高 CSS 的可维护性和可重用性。