介绍
postcss-each 是一个 PostCSS 插件，可以让你使用类似于 @each 的语法来生成 CSS 规则。
在传统的 CSS 中，我们需要写多个相似的规则，这些规则只是其中某些值有所不同。例如，如果我们想要为一组不同的颜色创建类名，我们可能会写出以下规则：
-- -------------------- ---- ------- ---------- - ------ ---- - ------------ - ------ ------ - ----------- - ------ ----- -展开代码
当我们需要添加更多的颜色时，就需要重复这个过程。使用 postcss-each，我们可以通过以下方式轻松地生成上述代码：
@each $color in red, green, blue { .color-$(color) { color: $(color); } }
安装
首先，我们需要安装 postcss-each：
npm install postcss-each
然后，我们需要将其添加到我们的 PostCSS 插件列表中。这通常是在构建工具配置文件中完成的，例如 webpack.config.js：
-- -------------------- ---- ------- ----- ----------- - ------------------------ -------------- - - -- --- ---- --- ------- - ------ - - ----- ---------- ---- ---------------- ------------- - ------- ----------------- -------- - --------------- - -------- - -------------- -- --- ---- --- -- -- -- --- -- -- -- --展开代码
使用
在安装和配置 postcss-each 后，我们可以使用它来生成我们的 CSS 代码了。
基本用法
postcss-each 的基本语法是：
@each $variable in value1, value2, value3 { /* rules */ }
其中，$variable 是一个变量名，在规则中可以使用。value1, value2, value3 是一组值，使用逗号分隔。当编译时，postcss-each 将会将每个值分别替换 $variable 的出现位置。
例如，我们可以使用以下代码来生成一组带有不同字体大小的标题：
@each $size in 14px, 16px, 18px { h$size { font-size: $size; } }
在这个例子中，$size 变量被设置为具有三个不同值的数组。每次循环时，$size 被替换为数组中的下一个值，并创建一个新的 h 标签规则。最终生成的 CSS 如下：
-- -------------------- ---- ------- ----- - ---------- ----- - ----- - ---------- ----- - ----- - ---------- ----- -展开代码
嵌套使用
postcss-each 还支持嵌套使用，以便可以生成更复杂的 CSS 规则。例如，我们可以使用以下代码来生成一个带有不同颜色和字体大小的标题：
@each $size in 14px, 16px, 18px { @each $color in red, green, blue { h$size.color-$color { font-size: $size; color: $color; } } }
在这个例子中，我们使用了两个嵌套的循环。$size 和 $color 变量分别被设置为具有三个不同值的数组，并在每次循环时创建新的 h 标签规则。最终生成的 CSS 如下：
-- -------------------- ---- ------- --------------- - ---------- ----- ------ ---- - ----------------- - ---------- ----- ------ ------ - ---------------- - ---------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------展开代码
