SCSS @each详解

在SCSS中，@each指令用于循环遍历一个列表或映射，并为每个元素执行相同的操作。它能够帮助我们减少重复的代码，提高样式表的可维护性和可读性。本文将详细介绍@each指令的使用方法及其示例。

@each的基本语法

@each指令的基本语法如下：

@each $variable in <list or map> {
  // styles to apply
}

$variable: 用来代表循环中的每个元素。
<list or map>: 要遍历的列表或映射。

@each遍历列表

首先，让我们看一个简单的示例，通过@each指令来遍历一个颜色列表，并为每种颜色生成对应的样式。

$colors: red, green, blue;

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

在上面的示例中，我们定义了一个包含三种颜色的列表$colors，然后使用@each指令遍历这个列表，并为每种颜色生成一个对应的类名和背景颜色样式。编译后的CSS代码如下：

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

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

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

@each遍历映射

除了列表，@each指令也可以用来遍历映射。下面我们看一个示例，通过@each指令遍历一个映射，生成不同字体大小的样式。

$font-sizes: (
  small: 0.8rem,
  medium: 1rem,
  large: 1.2rem
);

@each $size, $value in $font-sizes {
  .font-#{$size} {
    font-size: $value;
  }
}

在上面的示例中，我们定义了一个包含不同字体大小的映射$font-sizes，然后使用@each指令遍历这个映射，并为每个字体大小生成一个对应的类名和样式。编译后的CSS代码如下：

.font-small {
  font-size: 0.8rem;
}

.font-medium {
  font-size: 1rem;
}

.font-large {
  font-size: 1.2rem;
}

@each嵌套遍历

@each指令还支持嵌套遍历，可以在一个@each块中嵌套另一个@each块。下面是一个示例，演示如何通过嵌套@each遍历两个列表，生成组合类名的样式。

$background-colors: red, green, blue;
$text-colors: white, black;

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

在上面的示例中，我们定义了两个颜色列表$background-colors和$text-colors，然后通过嵌套@each遍历这两个列表，为每种背景颜色和文字颜色生成一个组合类名的样式。编译后的CSS代码如下：

.btn-red-white {
  background-color: red;
  color: white;
}

.btn-red-black {
  background-color: red;
  color: black;
}

.btn-green-white {
  background-color: green;
  color: white;
}

.btn-green-black {
  background-color: green;
  color: black;
}

.btn-blue-white {
  background-color: blue;
  color: white;
}

.btn-blue-black {
  background-color: blue;
  color: black;
}