简介
在编写前端样式时，我们经常会使用 CSS 自定义属性，也就是 CSS 变量。但是，由于浏览器对 CSS 变量支持的不够完善，导致我们在某些情况下需要将这些自定义属性转化为普通的 CSS 声明。这时候，就有一个非常好用的 npm 包，叫做 css-customproperties-parser。它可以将你的 CSS 自定义属性转化为普通的 CSS 声明，方便我们在多个浏览器或者环境中使用。
安装
首先，我们需要在项目中安装这个 npm 包。使用 npm 安装命令即可：
npm install css-customproperties-parser --save
使用
使用 css-customproperties-parser 模块主要有两个接口，一个是 parse 函数，用于将 CSS 中的自定义属性转化为普通的 CSS 声明，另一个是 stringify 函数，用于将 CSS 声明转化为自定义属性声明。下面是两个函数的语法：
const {parse, stringify} = require('css-customproperties-parser');
const css = 'body { --color: red; color: var(--color); }';
const parsed = parse(css);
console.log(parsed); // Output: "body { color: red; }"
const stringified = stringify(parsed);
console.log(stringified); // Output: "body { --color: red; color: var(--color); }"我们可以看到，首先，我们需要引入 css-customproperties-parser 模块，然后使用 parse 和 stringify 两个函数进行 CSS 声明的转化。
示例代码
下面，我们来看一下一个示例代码，这个示例代码将会让你更加深入的理解 css-customproperties-parser。
HTML 代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------------------------- ------------
------ ---------------
------- -
------- ------
----------------- ----------------- ---------
------ ----------------- ------
----------- ---------------- ---- -----
-
------------- -
----------------- ---------------------- ---------
-
-------- -
----------- -----
-------- -----
---------- -----
-
----- -
----------------- ----------------- ---------
------ ----------------- ------
------ ------
-------------- -----
-------- -----
------------- -----
-------------- -----
----------- ---------------- ---- -----
-
----------- -
----------------- ---------------------- ---------
-
------- -
----------- -----
------- -----
----------------- ----------------- ---------
------ ----------------- ------
-------- -----
---------------- -------
------------ -------
----------- ---------------- ---- -----
-
------------- -
----------------- ---------------------- ---------
-
--------
-------
------
------- ---------------
------------------------------- ---------
---------
-------- ----------------
---- -------------
-------- ------
------- ---- ---------
------
---- -------------
-------- ------
------- ---- ---------
------
---- -------------
-------- ------
------- ---- ---------
------
----------
------- ---------------
------ ----
---------
-------
-------JS 代码
-- -------------------- ---- -------
----- ------- ---------- - ---------------------------------------
----- ------ - -----------------------------------------------
----- ------------ - --------------
----- --------- - ------------------------------ -- -
------------------------ - ------------------------------------------ -- -
----- ------- - -----------------------------------------------------
-- --------- -
----------------- - -----------
-------------------- - -----------
-
------ ------------
---
------ ------------
---
----- ----------------- - ---------------------
---------------------------------------------- - ------------------CSS 代码
-- -------------------- ---- -------
------- -
------- ------
----------------- --------
------ -----
----------- ---------------- ---- -----
-
------------- -
----------------- --------
-
-------- -
----------- -----
-------- -----
---------- -----
-
----- -
----------------- --------
------ -----
------ ------
-------------- -----
-------- -----
------------- -----
-------------- -----
----------- ---------------- ---- -----
-
----------- -
----------------- --------
-
------- -
----------- -----
------- -----
----------------- --------
------ -----
-------- -----
---------------- -------
------------ -------
----------- ---------------- ---- -----
-
------------- -
----------------- --------
-总结
通过本文，你已经了解了如何使用 css-customproperties-parser 这个 npm 包，它可以将你的 CSS 自定义属性转化为普通的 CSS 声明。同时，我们还给出了一个示例代码，说明了如何在浏览器中使用 css-customproperties-parser。相信在你的开发中，这个 npm 包一定会给你带来很大的便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fa181e8991b448dcf65