在前端开发中，我们经常需要使用透明度来实现一些效果，比如半透明的背景、渐变色等。而在 SASS 中，我们可以使用 @each 来快速生成透明度选择器，让我们的样式代码更加简洁和可维护。
什么是 @each
@each 是 SASS 中的一个循环语句，可以遍历一个列表，并在每个元素上执行一些操作。它的语法如下：
----- --------- -- ----- -- ---- - -- -- --------- ---- --------- -
其中，$variable 是变量名， 可以是一个列表或者一个映射。在循环中，每次 $variable 会被赋值为列表或映射中的一个元素，并执行相应的操作。
生成透明度选择器
在 CSS 中，我们可以通过 rgba() 函数来设置颜色的透明度。而在 SASS 中，我们可以使用 @each 来快速生成一组透明度选择器，如下所示：
----------- -- ---- ---- ---- ---- ---- ---- ---- ---- ---- --
----- -------- -- ---------- -
----------------------- -
-------- ---------
-
-在上面的代码中，我们定义了一个名为 $opacities 的列表，其中包含了从 0 到 1 的 11 个透明度值。然后我们使用 @each 循环遍历这个列表，每次将 $opacity 赋值为列表中的一个元素。在循环中，我们使用插值语法和选择器的命名规则生成了一组透明度选择器，如 .opacity-0、.opacity-10、.opacity-20 等等。最后，我们将透明度值应用到了对应的选择器上。
使用透明度选择器
使用上面生成的透明度选择器非常简单，只需要在 HTML 中添加对应的 class 名称即可。比如，要将一个元素的背景设置为 50% 的透明度，只需要添加 .opacity-5 的 class 名称即可，如下所示：
---- ----------------------- ------------
总结
通过使用 @each 循环语句，我们可以快速生成一组透明度选择器，让样式代码更加简洁和可维护。这种技巧不仅可以应用于透明度的设置，还可以用于生成其它类型的选择器，比如字体大小、边框样式等等。在实际开发中，我们可以根据需要灵活运用，提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66908fdbdc1ed1a61b570245