是不是觉得写一大堆的css太浪费时间?
想在写html结构的同时也可以写css吗?
想写css也可以像写emmet结构那样,一句话全搞定吗?

html2css 可以助你实现这个梦想!


目前版本:0.1.1
使用方法:
运行环境:node
安装方法:$ npm install html2css
使用示例:
1.命令调用
$ node html2css -p "D:/senro/node/html2css/test/index-mod.html"
只需指定html路径即可,css导出路径默认为该目录下的css/,没有会自己创建
2.代码调用
var html2css=require('html2css').html2css;
html2css(
'D:/senro/node/html2css/test/index-mod.html',    //html路径
'D:/senro/node/html2css/test/index-mod.css',    //css导出路径
function(log){    //回调返回导出日志字符串
console.log(log);
});
导出后,html2css会把你的html结构的data-css属性去掉,然后生成一个带-beforeExport后缀的html备份,同时把生成你定义的路径的css文件。

书写规则:

emmet css简写规则可以参照 : http://docs.emmet.io/cheat-sheet/

1. 只需在html标签里加上data-css属性定义emmet格式的css即可,其中bg情况导出后会根据配置在图片名前加默认路径。如果data-css属性里没有值则只输出该类名。

2. 多个类的情况,如果不想定义第一个类就写个():

3. 如果有多个类,但没有多个括号,就默认css是第一个类的

4. 单个类的定义带注释和前缀情况,其中css不用加():

5. 多个类定义带注释和前缀的情况,其中 { 注释 } [ 前缀 ] (css命令)为一个完整的类信息组,括号没有顺序,只定义需要的就行,没有可以不写:

6. 多个类但信息组不对应,默认为从头开始依次对应,后面没有对应的css的类即默认为没有定义css

7. 支持定义hover样式,[ hover: css命令 ]
8. 支持对没有类名的标签进行定义css,但必须定义前缀,否则无效

自定义:

安装后可以找到模块里的 emmetDictionary.js 文件进行自定义配置,比如:默认单位,图片路径,css缩进,默认css模版,关键字,甚至emmet css 规则。

注意:

1.html2css如果遇到不识别的关键字,不会报错,会在导出日志里显示未翻译的关键字,可以根据需要自定义该关键字。
2.html2css会在导出的css最前面,加上配置里的模版css,比如body的样式。