postcss-unroot 是一个 PostCSS 插件，它可以帮助开发者将根选择器 :root 转化为具体的选择器。在开发响应式设计或者移动端 Web 页面时，我们经常需要定义多个根选择器，这时使用 postcss-unroot 可以让你更加方便地管理和维护你的样式表。
安装
你可以使用 npm 或 yarn 安装 postcss-unroot，在你的项目中运行以下命令：
使用 npm：
npm install postcss-unroot --save-dev
使用 yarn：
yarn add postcss-unroot --dev
使用
postcss-unroot 主要提供了两个参数用来定义新的根选择器：namespace 和 selector。
首先在你的 PostCSS 配置文件中加载 postcss-unroot：
const postcss = require('postcss');
const unroot = require('postcss-unroot');
postcss([unroot])
.process(css, { from: 'src/main.css', to: 'dist/main.css' })
.then(result => {
console.log(result.css);
});将样式表中所有的 :root 转化为 .wrapper：
-- -------------------- ---- ------- ----- - ---------- ----- ------------ ---- - -- ------ -- -------- - ---------- ----- ------------ ---- -
将样式表中所有的 :root 转化为 .wrapper .container：
-- -------------------- ---- ------- ----- - ---------- ----- ------------ ---- - -- ------ -- -------- ---------- - ---------- ----- ------------ ---- -
参数说明
namespace
namespace 参数用来定义新的根选择器的命名空间，该参数默认为 root。
postcss([unroot({ namespace: 'mobile' })])将样式表中所有的 :root 转化为 .mobile：
-- -------------------- ---- ------- ----- - ---------- ----- ------------ ---- - -- ------ -- ------- - ---------- ----- ------------ ---- -
selector
selector 参数用来定义新的根选择器的具体选择器，该参数默认为 html。
postcss([unroot({ selector: '.wrapper' })])将样式表中所有的 :root 转化为 .wrapper：
-- -------------------- ---- ------- ----- - ---------- ----- ------------ ---- - -- ------ -- -------- - ---------- ----- ------------ ---- -
总结
使用 postcss-unroot 插件可以方便管理样式表中的根选择器，让开发者更加专注于具体的样式规则。如果你在开发响应式设计或者移动端 Web 页面时需要定义多个根选择器，那么这个插件将会是你的好帮手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3fd82edbf7be33b25671d3