前端开发中，我们经常使用 CSS 预处理器来增强 CSS 的表现力，比如说使用 Sass 或 Less 等。而 postcss 又是一个可由插件构成的工具，可以帮我们对 CSS 进行转换和预处理。
在这个 article 里，我们将介绍一个 postcss 的插件：postcss-remove-root，它能够将 CSS 规则中的 :root 选择器去掉，从而让我们在写 CSS 时更加精简。
安装
使用 npm 安装插件：
--- ------- ------------------- ----------
使用
- 将插件引入到 postcss 中：
----- ----------------- - ------------------------------- -------------------------------
- 写入你要转换的 CSS：
----- - ---------------- ----- - ---- - ------ --------------------- -
- 编译 CSS：
----- ------- - ------------------- ------------------------------------------------------- -- - ------------------------ ---
你将得到下面的输出：
---- - ------ --------------------- -
示例代码
----- ------- - -------------------
----- ----------------- - -------------------------------
----- --- - -
----- -
---------------- -----
-
---- -
------ ---------------------
-
--
------------------------------------------------------- -- -
------------------------
---深度
在这里，我们学习了 postcss-remove-root 这个 CSS 插件的使用方法。除此之外，你还可以学习其他 postcss 插件的使用，以加深自己的 CSS 技能。
指导意义
postcss-remove-root 是一个可以让我们更加简洁地书写 CSS 的插件。当然，它不仅仅作用于 :root 伪类，还可以对其他类型的选择器（如普通类名、标签名等）进行处理。
这类插件的出现，也体现了前端开发时候对于代码质量的重视。我们要编写的 CSS 代码应该的简洁易读，这样才能够方便维护和修改。
小结
在本文中，我们介绍了 postcss-remove-root 这个插件，以及它的使用方法。希望本文可以对大家有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedd611bb4e78292a6fb89d