SASS 应用：使用 @each 实现透明度选择器

在前端开发中，我们经常需要使用透明度来实现一些效果，比如半透明的背景、渐变色等。而在 SASS 中，我们可以使用 @each 来快速生成透明度选择器，让我们的样式代码更加简洁和可维护。

什么是 @each

@each 是 SASS 中的一个循环语句，可以遍历一个列表，并在每个元素上执行一些操作。它的语法如下：

@each $variable in <list or map> {
  // do something with $variable
}

其中，$variable 是变量名，<list> 可以是一个列表或者一个映射。在循环中，每次 $variable 会被赋值为列表或映射中的一个元素，并执行相应的操作。

生成透明度选择器

在 CSS 中，我们可以通过 rgba() 函数来设置颜色的透明度。而在 SASS 中，我们可以使用 @each 来快速生成一组透明度选择器，如下所示：

$opacities: 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1;

@each $opacity in $opacities {
  .opacity-#{$opacity*10} {
    opacity: $opacity;
  }
}

在上面的代码中，我们定义了一个名为 $opacities 的列表，其中包含了从 0 到 1 的 11 个透明度值。然后我们使用 @each 循环遍历这个列表，每次将 $opacity 赋值为列表中的一个元素。在循环中，我们使用插值语法和选择器的命名规则生成了一组透明度选择器，如 .opacity-0、.opacity-10、.opacity-20 等等。最后，我们将透明度值应用到了对应的选择器上。

使用透明度选择器

使用上面生成的透明度选择器非常简单，只需要在 HTML 中添加对应的 class 名称即可。比如，要将一个元素的背景设置为 50% 的透明度，只需要添加 .opacity-5 的 class 名称即可，如下所示：

<div class="opacity-5">Hello World!</div>

总结

通过使用 @each 循环语句，我们可以快速生成一组透明度选择器，让样式代码更加简洁和可维护。这种技巧不仅可以应用于透明度的设置，还可以用于生成其它类型的选择器，比如字体大小、边框样式等等。在实际开发中，我们可以根据需要灵活运用，提高开发效率和代码质量。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66908fdbdc1ed1a61b570245