在前端开发中，我们经常会使用CSS预处理器（如Sass和Less）来编写更易于维护的CSS代码。然而，这些预处理器并不能解决所有的问题，例如，它们无法很好地支持样式的复用。
为了解决这个问题，一种新的CSS处理工具——PostCSS应运而生。PostCSS是一个基于JavaScript的工具，它可以通过插件机制对CSS进行转换和优化。其中，postcss-apply是一个非常有用的插件，它允许开发者创建可重用的样式片段，并在CSS中引用它们。
安装
要使用postcss-apply，首先需要安装它及其依赖项。你可以将其作为项目的依赖项进行安装：
npm install postcss postcss-apply --save-dev
如果你正在使用Webpack或Gulp等构建工具，则可以将postcss-loader添加到你的构建配置中：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- ---------------- ------------- ------------------
--
--
--
--使用
在安装完postcss-apply后，你就可以在CSS中使用它了。假设你有以下两个样式片段：
-- -------------------- ---- ------- -- ------ -- ----- - ---------------- -------- - -- ------ -- ------- - ----------------- --------------------- ------ ------ -
在上述代码中，我们定义了一个名为--color-primary的CSS变量，然后在.button选择器中使用它。但是，如果我们想要复用这个样式片段到其他选择器中，该怎么办呢？
使用postcss-apply，你可以将样式片段定义为@apply规则：
-- -------------------- ---- -------
-- ------ --
----- -
---------------- --------
-
------------ -
------ ---- ----------
----------------- ---------------------
-
-- ------ --
---- -
-------- -------------
-------- --- -----
---------- -----
------------ ----
------------ -----------
----------- -------
------------ -------
--------------- -------
------- --------
------------ -----
------- --- ----- ------------
-------------- ----
---------- -
----------------- -----
------ ------
-
-在上述代码中，我们将.btn .btn-blue选择器组合成了一个可重用的样式片段，并通过@apply关键字将其应用到.btn-primary选择器中。在.btn-primary中，我们还使用了之前定义的--color-primary变量来设置背景颜色。
注意事项
需要注意的是，postcss-apply并不是CSS本身的一部分，因此在使用之前需要进行转换。你可以将postcss-apply插件添加到PostCSS的插件列表中：
const postcss = require('postcss');
const postcssApply = require('postcss-apply');
const processor = postcss([postcssApply]);然后，通过调用process方法来处理CSS：
const result = await processor.process(css, { from: 'src/app.css', to: 'app.css' });
console.log(result.css);结论
通过使用postcss-apply，我们可以更轻松地编写可重用的CSS样式片段，从而提高代码的复用性和维护性。虽然它需要一些额外的配置工作，但是它所带来的好处是值得的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/47867