简介
postcss-resolve-nested-selector 是一个 postcss 插件，它能够将嵌套的选择器解析成扁平的选择器。在前端开发中，我们有时希望使用嵌套的选择器来书写样式代码，但是浏览器不支持这一特性。这时，我们可以使用 postcss-resolve-nested-selector 来解决这个问题。
安装
使用 npm 安装：
npm install postcss-resolve-nested-selector --save-dev
使用方法
使用 postcss-resolve-nested-selector 的步骤如下：
在项目中引入
postcss-resolve-nested-selector插件：const postcssResolveNestedSelector = require('postcss-resolve-nested-selector');在
postcss插件列表中添加postcss-resolve-nested-selector：const postcssPlugins = [ postcssResolveNestedSelector() ];在
postcss中使用插件列表：const postcssResult = postcss(postcssPlugins).process(css);
示例代码
下面是一个使用 postcss-resolve-nested-selector 的示例：
-- -------------------- ---- -------
-- --------- --
---------- -
-------- -----
---------------- -------
----- -
------- -----
-------- ----
------- -
----------------- --------
-
-
--- -------------------- ---- -------
-- -----------------
----- ---------------------------- - -------------------------------------------
-------------- - -
-------- -
------------------------------
-
--
-- --------
----- -- - --------------
----- ------- - -------------------
----- ------------- - -------------------------------
----- --- - ------------------------------ ---------
----- ------------- - --------------------------------------------
-------------------------------输出结果：
-- -------------------- ---- -------
---------- -
-------- -----
---------------- -------
-
---------- ----- -
------- -----
-------- ----
-
---------- ----------- -
----------------- --------
-总结
postcss-resolve-nested-selector 可以帮助我们更好地书写 CSS 代码。通过将嵌套选择器解析成扁平选择器，我们可以减少选择器权重，让代码更加清晰简洁。同时，postcss-resolve-nested-selector 还有一个很好的特性，就是支持使用 & 来代替上层选择器，这样可以使代码更加灵活。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbdecb5cbfe1ea0611b07