CSSLab:踏踏实实的给css做实验

一个小点子。

很多时候一些css属性想测试一下,都是F12在开发者工具里面弄的。这么弄没有保留性,也不方便展示。

看张鑫旭大牛的博客感觉自己做一个css的小实验室插件还不错,于是就弄了这么个小插件:CSSLab,项目用gulp构建。

总功能代码才几十行而已= =。

原理是,在内容模板(content.jade)上写好你需要的内容,需要控制的部分赋一个id(较规范的话要以 lab- 开头),然后 new一个CSSLab,参数为id值。

之后是功能函数,你需要绑定一个需要修改的值的话,只需要使用addVar这个函数就行。

addVar : function(info,attr,type,options)

info:绑定变量的信息,比如“父元素背景色”,“子元素字体大小”

attr:绑定的属性,css在DOM的style属性里面的参数,如“backgroundColor”,“fontSize”

type:如何控制这个属性值,滚动条的话就range,文字域就text,下拉菜单就options(此处应该会改成select

options:控制参数。

options根据不同的type有不同的写法:
range:{
u : "计量单位如%/px/em,没有就不填",
min : "最小值",
max : "最大值"
}
text:{
u : "计量单位如%/px/em,随意就不填"
}
options:{
u : "计量单位如%/px/em,没有就不填"
o : ["选项1","选项2","选项3"]
}

我在仓库的example里面做好了一个案例,目前就是这样。

有一个想法,整合起这些奇怪的小问题做更多的实验,然后真的弄一个CSSLab出来。

如果真的弄了这个,我会给它买域名CSSLab.wang,站点名就是汪君的CSS实验室哈哈哈哈。

标签: none

添加新评论