http://jakobloekke.github.io/tdcss.js/
在前端开发中,如果能够有一个style guide对于设计来说就显得专业稳定,一致性。在上述链接中,有一个tdcss.js的工具可以帮助你生成可视化的style guide,
非常方便。其原理就是使用那个js文件在html加载完成后对特定section来做重新structure,形成style guide的样式
@stop-color: red;@wait-color: orange;@go-color: green;.btn {padding: 0 30px;font-size: 2em;&.stop {background-color: @stop-color;color: contrast(@stop-color);}&.wait {background-color: @wait-color;color: contrast(@wait-color);}&.go {background-color: @go-color;color: contrast(@go-color);}}
Style guide