概述
若有在前端领域编写代码的经验，你很可能会遇到这样的问题：如何处理将 JSON 与 CSS 进行混合的情况？我们想要在前端工程中轻松地解决这个问题，那么就可以使用一个 npm 包：json-css。
安装
安装 json-css 很方便，只需在命令行中输入以下命令即可：npm install json-css。
使用
使用 json-css 的实现方法不难，这段话可以给初学者作为一个指导。
- 首先，创建一个带有样式属性的 JSON 对象。
-- -------------------- ---- -------
--- ---- - -
----- -
------ -------
----------- ------------
--
--- -
--------- ------
-
--- 调用
jsonCss.convert(json)方法将你的 JSON 对象转换为 CSS 文本。
var css = jsonCss.convert(json); console.log(css);
- 将以上生成的 CSS 文本添加到页面的
<style>标签中。
var style = document.createElement('style');
style.innerHTML = css;
document.head.appendChild(style);深度
json-css 能够支持更为复杂的嵌套关系。你可以使用多层级的 JSON 对象来实现更复杂的样式定义。
-- -------------------- ---- -------
--- ---- - -
----- -
------ -------
----------- -------------
----------- -
------- ----- ------
------------- ------
--------- -
--------- -------
----------- -------
------------- -
--------- -------
----------- --------
-
-
-
-
--最终的 CSS 样式表将会是这个样子：
-- -------------------- ---- ------- ---- - ------ ----- ------------ ----------- - ---- -------- - ------- ---- ----- -------------- ---- - ---- -------- ------ - ---------- ----- ------------ ----- - ---- -------- ------ ---------- - ---------- ----- ------------ ------- -
学习以及指导意义
使用 JSON 对象来定义 CSS 样式是一个更为渐进的过程。尽管这种方法可能在小规模项目中比较好用，但是当你的项目变得更为复杂时，就需要使用 Sass 等更为高级的工具来进行代码组织和管理。但是，通过学习 json-css 的使用方法，你可以更好地理解前端保留关键字和 CSS 选择器等知识点。同时，你可以使用 json-css 来生成动态的 CSS 样式表，从而降低网页加载的时间。
示例代码
这里有一些例子，希望能够给你更多的理解。
简单例子
定义一个 body 元素，定义元素的字体和颜色。
var json = {
body: {
color: '#333',
fontFamily: 'sans-serif'
}
};带样式类的元素
定义一个带样式类的 div 元素，它的 background-color 属性是红色的。
-- -------------------- ---- -------
--- ---- - -
------------ -
---------------- -----
-
--
-------
--------- -
----------------- ----
-
--------组合选择器
定义一个带有组合选择器的元素，包含 id 选择器和 class 选择器（即 #element-id.demo）。
-- -------------------- ---- -------
--- ---- - -
------------------- -
------ -------
-
--
-------
---------------- -
------ ------
-
--------复杂的选择器嵌套
嵌套多个层级的元素：
-- -------------------- ---- -------
--- ---- - -
----- -
------ -------
----------- -------------
----------- -
------- ----- ------
------------- ------
--------- -
--------- -------
----------- -------
------------- -
--------- -------
----------- --------
-
-
-
-
--
-------
---- -
------ -----
------------ -----------
-
---- -------- -
------- ---- -----
-------------- ----
-
---- -------- ------ -
---------- -----
------------ -----
-
---- -------- ------ ---------- -
---------- -----
------------ -------
-
--------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcab8b5cbfe1ea06124a4