前言
对于前端开发者来说，使用npm包已经是司空见惯的操作，而postcss作为自动化构建css的重要工具，也有许多相关的npm包。本文将介绍一款postcss插件——postcss-plugin-context，并提供详细的使用教程和示例代码。
postcss-plugin-context是什么
postcss-plugin-context是一个postcss插件，它可以接收一个自定义的选项和属性，然后将这些属性传递到插件的子集中。在一些大型的前端项目中，当样式文件需要多人协作时，我们经常需要将组件的属性进行拆分，然后由不同的人员来负责编写，这时就可以使用postcss-plugin-context来实现关键属性的传递。
如何使用postcss-plugin-context
安装
在使用postcss-plugin-context之前，首先需要使用npm将它安装到你的项目中。
npm install postcss-plugin-context --save-dev
配置使用
安装完成后，需要在postcss配置文件中配置使用postcss-plugin-context。其中，postcss-plugin-context需要在浏览器前缀插件autoprefixer之前进行使用。
-- -------------------- ---- -------
--- ------- - ------------------------
--- ------------ - ------------------------
--- ------- - ----------------------------------
---------------- -------- -- -
--- ------- - -
---------
----- -
------ -------
--
---
-------------
--
------ ----
-------------------
-----------------------
---------------------------
---在上述例子中，我们设置了一个color变量，值为blue，然后传递给了postcss插件组。下面我们通过一个例子来详细地介绍一下postcss-plugin-context的使用方法。
示例
以一个按钮的样式为例，我们需要对按钮进行不同的变色，而实现这个功能的过程看起来很麻烦。下面是我们原本的样式文件：
-- -------------------- ---- ------- -- --------- -- ------ - ----------------- ----- - ---------------- - ----------------- ------ - -------------- - ----------------- ---- -
如果我们只使用一个全局变量来控制上述样式，则会显得非常混乱。所以我们希望可以通过属性传递来实现每个按钮的不同变化。那么，我们可以使用postcss-plugin-context来实现这个过程。
在postcss配置文件中添加如下代码
-- -------------------- ---- -------
--- ------- - ------------------------
--- ------------ - ------------------------
--- ------- - ----------------------------------
---------------- -------- -- -
--- ------- - -
---------
----- ---
---
-------------
--
------ ----
-------------------
-----------------------
---------------------------
---我们需要添加一个空变量，则可以通过postcss-plugin-context来进行变量的传递。
然后修改样式文件，添加变量。
-- -------------------- ---- -------
-- --------- --
------ -
----------------- -----
-------- -
------ ----------
-
-
---------------- -
----------------- ------
-------- -
------ --------
-
-
-------------- -
----------------- ----
-------- -
------ ------
-
-通过context属性，在每个按钮上添加了一个color变量，它们分别对应了不同的颜色。然后在postcss-plugin-context中定义color变量，并根据值的不同分别进行操作。
-- -------------------- ---- -------
--- ------- - ------------------------
--- ------------ - ------------------------
--- ------- - ----------------------------------
---------------- -------- -- -
--- ------- - -
---------
----- -
------ -
-------- -------
------ --------
---- ------
--
--
------- ------------
------------ -------- --- ------ -
--- --- - --------------------
------ --------------------------
--
---
-------------
--
------ ----
-------------------
-----------------------
---------------------------
---在上述代码中，我们通过filter属性将context属性进行过滤并传递到replacement函数中。该函数根据属性值的不同，可以返回定义的相应变量。
最后，我们可以得到如下结果
-- -------------------- ---- ------- -- --------- -- ------ - ----------------- ----- - ---------------- - ----------------- ------ - -------------- - ----------------- ---- -
通过这种方式，我们可以轻松的控制每个按钮的颜色，并且不需要定义全局变量。这也体现了postcss-plugin-context的优越性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedca8ab5cbfe1ea061243a