简介
在前端开发中，我们经常需要通过 CSS 进行样式定义。而随着网站越来越复杂，样式表也变得愈发庞大和复杂。为了更好的维护和管理样式表，我们通常会使用 CSS 预处理器，如 Sass、less 等。这些工具都能够帮助我们更加方便地编写复杂的样式表。然而，这些预处理器都有各自的局限性，其中一个主要的限制就是无法循环遍历一个变量列表。为了解决这个问题，我们可以使用 postcss-each-variables 这个 npm 包。
postcss-each-variables 简介
postcss-each-variables 是一个 PostCSS 插件，它能够将定义好的变量列表循环遍历，以便我们能够更加方便地定义样式。从官方 Github 页面上可以看到它的安装方式：
npm install postcss-each-variables --save-dev
安装完成后，我们就可以在项目中使用它了。但是，在开始使用它之前，我们需要先了解它的基本用法和相关的语法。
postcss-each-variables 用法
postcss-each-variables 的用法非常简单，只需要使用 @each 语法即可循环遍历变量列表。下面是一个简单的示例代码：
-- -------------------- ---- -------
-- ---- --
----- -
--------- ---- ------ -----
-
-- ---- --
----- ------ -- ------------- -
-------------- -
----------------- -------
-
-在这个示例代码中，我们定义了一个名为 colors 的变量列表，其中包含了三种颜色值。然后，我们在样式表中使用了 @each 语法，循环遍历了这个变量列表，并在遍历的每个元素上添加了一个 CSS 类名，用于设置背景颜色。
postcss-each-variables 语法说明
在上面的示例代码中，我们使用了 @each 语法，它的语法格式如下：
@each $var in <list> {
/* ... */
}其中，$var 表示变量名，<list> 表示要遍历的变量列表，其中可以包含变量。在整个循环过程中，$var 会自动替换为列表中的每个元素，并执行循环体内的语句。在循环体内，可以通过 #{$var} 的方式来引用当前元素的值，并将它插入到 CSS 规则中。
postcss-each-variables 实战
下面是一个实战示例，它用到了 postcss-each-variables 来生成一个包含多个 CSS 类名的列表，用于设置背景颜色。代码如下所示：
-- -------------------- ---- -------
-- ---- --
----- -
--------- ---- ------ -----
------------ -------- -------- -------
-
-- ---- --
----- --------- -- ---------------- -
----- ------ -- ------------- -
--------------------------- -
----------------- -------
-
-
-在这个示例代码中，我们定义了两个变量列表，一个表示颜色列表，一个表示按钮类型列表。然后，我们嵌套了两个 @each 语句，循环遍历这两个变量列表，并根据当前元素生成多个 CSS 类名。最终，样式表中将生成八个按钮样式，分别为 primary-red、primary-green、primary-blue、success-red、success-green、success-blue、danger-red、danger-green、danger-blue。
总结
通过使用 postcss-each-variables 插件，我们可以更加方便地循环遍历变量列表，并在循环体内动态生成样式。这个插件非常适合需要定义类似颜色或按钮等具有多种样式的元素的情况。掌握了这个插件的用法，在实际工作中可以更加高效地编写 CSS 样式表。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567fc81e8991b448e4225