在前端开发过程中，我们经常需要处理 CSS 文件。其中，自定义属性是一种非常有用的技术，可以让我们更方便地管理和复用样式。而 postcss-custom-properties 就是一个优秀的 NPM 包，能够帮助我们实现自定义属性的使用。
什么是 postcss-custom-properties？
postcss-custom-properties 是一个 PostCSS 插件，它使我们可以在 CSS 中使用自定义属性。这些属性类似于变量，允许我们将样式值分配给一个变量，并随后在 CSS 中引用该变量。
例如，我们可以使用以下代码定义一个自定义属性：
----- - ------------- -------- -
然后在其他 CSS 规则中使用该属性：
- - ------ ------------------ -
当浏览器解析 CSS 文件时，postcss-custom-properties 将会把这些自定义属性转换成标准的 CSS 属性。
安装 postcss-custom-properties
要使用 postcss-custom-properties，首先需要安装它。可以通过 NPM 来安装：
--- ------- ------- ------------------------- ----------
这个命令将会在你的项目中安装 postcss 和 postcss-custom-properties 这两个包。
配置 postcss-custom-properties
接下来，我们需要配置 postcss-custom-properties 插件。为了使用它，我们需要创建一个 postcss.config.js 文件，内容如下：
-------------- - -
-------- -
--------------------------------------
--------- ------
----------- ------------------------
---
-- --- ----
--
--其中，preserve 表示是否保留原来的自定义属性。如果设置为 true，则原始自定义属性将保留在 CSS 中。如果设置为 false（默认值），则在转换过程中会将它们替换为标准的 CSS 属性。
importFrom 表示从哪里导入自定义属性。可以是一个文件路径、一个 URL，也可以是一个包含自定义属性的对象。
使用 postcss-custom-properties
现在，我们已经完成了 postcss-custom-properties 的安装和配置。接下来，我们就可以在项目中使用这个插件了。
首先，我们需要创建一个包含自定义属性的 CSS 文件，例如 variables.css：
----- - ------------- -------- -
然后，在其他 CSS 文件中使用这些变量：
- - ------ ------------------ -
当你编译这些 CSS 文件时，postcss-custom-properties 将会自动将这些自定义属性转换成标准的 CSS 属性。这样，浏览器就能够正确地解析这些样式了。
示例代码
以下是一个完整的代码示例，演示如何使用 postcss-custom-properties：
首先，安装依赖：
--- ------- ------- ----------- ------------------------- ----------
然后，创建一个包含自定义属性的 CSS 文件 variables.css：
----- - ------------- -------- -
最后，编写一个需要使用这些自定义属性的 CSS 文件 main.css：
- - ------ ------------------ -
为了将这些 CSS 文件编译成标准的 CSS 文件，我们可以在 package.json 文件中添加一个 "build" 脚本，如下所示：
-
------- -------------
---------- -
-------- -------- ------------ -- --------------
--
------------------ -
---------- ----------
-------------- ---------
---------------------------- ---------
-
-现在，运行以下命令即可编译 CSS 文件：
--- --- ----- ----------------------------------------------------------- ---------- ---------------------------------------------------------------------------------------