什么是 postcss-simple-vars
postcss-simple-vars 是一款基于 PostCSS 的 CSS 变量插件，用于在 CSS 中定义变量并进行调用。通过使用 postcss-simple-vars，您可以轻松地在项目中定义和使用自己的 CSS 变量，并随时根据需要进行修改。
安装和配置
安装 postcss-simple-vars 可以使用 npm：
npm install postcss-simple-vars --save-dev
安装完成后，在项目中配置 PostCSS 并加入该插件即可。以下是一个简单的 PostCSS 配置示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - -------------------------------
-------------- - -
-------- -
------
---------- -
-- ---------
--
---
-- ----
--
--如何使用
定义变量非常简单，只需在 CSS 中使用 $ 符号即可。以下是一个简单的例子：
$primary-color: #007bff;
$secondary-color: #6c757d;
body {
background-color: $primary-color;
color: $secondary-color;
}在上述示例中，我们定义了两个变量：$primary-color 和 $secondary-color，并将它们分别应用到了背景颜色和文字颜色属性上。这意味着，如果我们想要更改这些颜色，我们只需要改变这些变量的值即可。这种方法使得在整个项目中保持一致的颜色和样式变得非常容易。
高级选项
postcss-simple-vars 提供了一些高级选项，用于更灵活地使用该插件。以下是一些常用的选项：
preserve
默认情况下，如果您在 CSS 中使用了未定义的变量，postcss-simple-vars 会将其删除。但是，在某些情况下，您可能希望保留这些变量原本的值。在这种情况下，您可以将 preserve 选项设置为 true：
vars({
variables: {
// 在此处定义你的变量
},
preserve: true,
}),unknownCallback
如果定义了 preserve 选项，并且在 CSS 中使用了未定义的变量，则 postcss-simple-vars 会调用 unknownCallback 函数。可以使用此函数自定义处理方式。以下是一个简单的例子：
-- -------------------- ---- -------
------
---------- -
-- ---------
--
--------- -----
---------------- --------- ----- -- -
--------------------- -------- ---------- ---- -- ----------------------------
--
---在上述示例中，我们定义了一个名为 unknownCallback 的回调函数，用于在控制台中输出错误消息。
结论
通过使用 postcss-simple-vars 插件，您可以轻松地定义和管理 CSS 变量，以便在整个项目中保持一致的颜色和样式。该插件提供了许多高级选项，可以使您更加灵活地使用它。希望这篇文章能够帮助您熟悉 postcss-simple-vars 的使用方法，并在您的项目中发挥作用。
示例代码：
-- -------------------- ---- ------- -- ------------------------ -- --------------- -------- ----------------- -------- ------ - ----------------- --------------- ------ ------ ------- ----- -------- ---- ----- - --- --- -- - ------ ----------------- -
-- -------------------- ---- -------
-- -----------------
----- ---- - -------------------------------
-------------- - -
-------- -
------
---------- -
-- ---------
-- ---------
---------- ---------------------------
--
--------- -----
----------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------