简介
jss-nested 是一个可以帮助我们更简单的编写样式的 npm 包。通过这个包，我们可以在一定程度上解决我们在样式编写过程中的繁琐问题。
安装
安装 jss-nested 可以通过 npm 快速完成：
npm install jss-nested
使用方法
基础用法
jss-nested 可以帮助我们把嵌套的样式转换为扁平化的 CSS 规则集。我们可以将嵌套的样式作为 JavaScript 的一个对象属性来进行书写，代码清晰，易于维护。具体代码如下：
-- -------------------- ---- -------
------ - ------ - ---- ------
------ ------ ---- -------------
----- ------ - -
------- -
----------- ------
---------- -
----------- -------
--
-- ------ -
----------- -------
--
--
--
----- --- - --------
-------- -----------
---
----- - ------- - - --------------------------------------
---------------------以上代码中，我们使用 jss-nested 来编写一个叫做 button 的样式，里面包含了嵌套的伪类 &:hover 和嵌套的子元素 & span。使用 nested 插件可以将样式扁平化，最终输出我们所需要的 CSS 规则。console.log(classes) 输出如下：
-- -------------------- ---- -------
-
------- -
----------- -----
--
--------------- -
----------- ------
--
------- ------ -
----------- ------
-
-结合其他插件使用
在实际应用中，我们也需要将 jss-nested 与其他插件一起使用，以充分发挥 jss-nested 的优势。以 jss-vendor-prefixer 为例，我们可以使用如下代码进行配置：
-- -------------------- ---- -------
------ - ------ - ---- ------
------ ------ ---- -------------
------ -------------- ---- ----------------------
----- --- - --------
-------- ---------- ------------------
---
----- - ------- - - ----------------------
------- -
-------- -------
-- ------ -
----------- -------
--
--
------------
---------------------这里，我们引入 jss-vendor-prefixer 插件，用于处理跨浏览器兼容性问题。在进行 jss.createStyleSheet 处理时，我们随意乱写的包含嵌套样式的样式对象也将会被自动处理为对应的 CSS 规则。
总结
jss-nested 是一个可以很好的帮助我们在前端开发中编写样式的工具，它可以使得嵌套样式的书写更加简洁、清晰，代码维护起来也更加方便。同时，它也支持和其他插件的结合使用，使得应用范围更加广泛。使用 jss-nested 可以让我们更好地掌握前端开发中样式的处理，深入挖掘这个工具的使用，会让我们的前端开发经验更加丰富。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/59081