json_script

css precessor

Usage no npm install needed!

<script type="module">
  import jsonScript from 'https://cdn.skypack.dev/json_script';
</script>

README

json to css

类似于less、sass这样的css预处理器,这里采用json格式的语法来编写css,如下所示:

json文件:

{
    '.wrap': {
        'margin-top': '20px',
        'padding': '20px',
        'color': '#444',
        p: {
            'padding-top': '20px',
            'font-size': '28px'
        }
    }
}

生成的css:

.wrap {
  margin-top: 20px;
  padding: 20px;
  color: #444;
}
.wrap p {
  padding-top: 20px;
  font-size: 28px;
}

安装

npm install --save json_script

使用

  1. 新建一个.js文件
  2. 添加如下代码
var json_script = require('json_script');

json_script(function(convert) {
    convert.css({
        '.wrap': {
            'margin-top': '20px',
            'padding': '20px',
            'color': '#444',
            p: {
                'padding-top': '20px',
                'font-size': '28px'
            }
        }
    });
}).render(function(css){
    console.log("渲染后的css:");
    console.log(css);
})

资源