Stylus 基本使用

stylus 是 CSS 的预处理框架 CSS 预处理，顾名思义，预先处理 CSS。那 stylus 咋预先处理呢？stylus 给 CSS 添加了可编程的特性，也就是说，在 stylus 中可以使用变量、函数、判断、循环一系列 CSS 没有的东西来编写样式文件，执行这一套骚操作之后，这个文件可编译成 CSS 文件。 ``` $ npm install stylus ``` 运行 stylus example.styl 可将 demo.styl 文件编译成 example.css 文件 一段简单的 stylus 代码： ``` $background-color = lightblue add (a, b = a) a = unit(a, px) b = unit(b, px) a + b .list-item .text-box span background-color: $background-color margin: add(10) padding: add(10, 5) &:hover background-color: powderblue ``` 编译后生成的 CSS 代码： ``` .list-item span, .text-box span { background-color: #add8e6; margin: 20px; padding: 15px } .list-item:hover, .text-box:hover { background-color: #b0e0e6; } ``` 全面的 stylus 知识可以参考官方文档，或者中文文档 http://stylus-lang.com/ http://www.zhangxinxu.com/jq/stylus/