Scss 循环 - CSS 主题

Scss 是 CSS 的预处理语言，可以让开发者更快速、更便捷地编写 CSS。其中，循环非常常见，我们可以使用循环来避免重复的 CSS 代码，提高代码的可读性和可维护性。

for 循环

for 循环在 Scss 中非常常见，可以通过循环与嵌套来生成 CSS 代码。

// 定义变量
$colors: ('red', 'green', 'blue');

// for 循环
@for $i from 1 through length($colors) {
  .item-#{$i} {
    background-color: nth($colors, $i);
  }
}

返回的代码片段：

// 定义变量
$colors: ('red', 'green', 'blue');

// for 循环
@for $i from 1 through length($colors) {
  .item-#{$i} {
    background-color: nth($colors, $i);
  }
}

此处我们定义了一个数组变量 $colors，然后使用 @for 指令来循环这个数组，通过 nth 函数获取数组的第 i 个元素，并将它赋值给 .item-#{$i} 的背景颜色。这样可以生成一组不同背景颜色的样式。

each 循环

@each 指令经常用于迭代 map 或 list 类型变量。它将变量映射到一个临时变量，并在循环期间应用变量的值。

// 定义 map 变量
$items: (
  'item1': 'red',
  'item2': 'green',
  'item3': 'blue'
);

// each 循环
@each $key, $value in $items {
  .#{$key} {
    color: $value;
  }
}

返回的代码片段：

// 定义 map 变量
$items: (
  'item1': 'red',
  'item2': 'green',
  'item3': 'blue'
);

// each 循环
@each $key, $value in $items {
  .#{$key} {
    color: $value;
  }
}

此例子中我们定义了一个 map 类型的变量 $items，然后使用 @each 指令循环 map 变量，迭代 map 中的每一个 key-value 对，并将 key 的值作为类名，value 的值作为文字颜色。

while 循环

while 循环会一直循环，直到判断条件为 false 才会停止循环。

// 定义变量
$i: 1;

// while 循环
@while $i <= 5 {
  .item-#{$i} {
    width: $i * 20px;
    height: $i * 20px;
  }
  $i: $i + 1;
}

返回的代码片段：

// 定义变量
$i: 1;

// while 循环
@while $i <= 5 {
  .item-#{$i} {
    width: $i * 20px;
    height: $i * 20px;
  }
  $i: $i + 1;
}

在此示例中，我们定义了变量 $i 并设置它等于 1。这个例子中因为循环条件都是 true，循环会一直执行，生成一组宽高递增的样式。

总结

通过 Scss 循环，我们可以避免重复的 CSS 代码，提高代码的可读性和可维护性。上述介绍了 Scss 中的 for、each 和 while 循环，不同类型的循环适用于不同的情况，需要根据实际场景来选择使用。