Stylus—CSS预处理框架
Stylus 是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，它是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。比较年轻，其本质上做的事情与 SASS/LESS 等类似，应该是有很多借鉴，所以近似脚本的方式去写CSS代码，和js联系更加紧密。
随着项目越来越复杂，CSS的预处理越来越重要，css维护工作会越来越困难，造成这些困难的很大原因源于CSS
是一门非程序式语言，没有变量、函数、作用域等概念。为了更好的管理、维护CSS代码，可以使用stylus、sass、less等技术, 这里选择stylus。
开源地址：https://github.com/stylus/stylus
stylus的安装：
由于stylus是基于node的，所以第一步要先安装好node环境。
1、node下载地址：http://nodejs.cn/download/，下载后运行，点下一步。。。。至到安装完成。
stylus的安装除了需要上面的node环境以外，还需要借助另一个工具：npm 包管理工具，好在node在安装时就已经自动一并带装好了，所以这一步就直接略过。
node环境安装好后：
打开命令行工具，或按住键盘上的shift 再点鼠标右键 --> 在此外打开命令窗口。
输入： node -v 按回车键，就可查看node的版本了，如果能看到，就表示node环境已经安装好了。
输入：npm -v 按回车键，就可查看npm的版本了。
2、stylus正式安装：
在命令行中输入：npm install -g stylus 按回车键，就开始安装了。。。
安装完成后输入：stylus -h 可查看stylus的相关帮助信息了，不是全是英文。。哈哈。。
3、使用stylus写css样式：
打开代码编辑器，在项目目录中专门放css样式表的目录下 --> 新建一个文件（注后缀名一定要改为.styl），然后在这个文件中，就可以用stylus的写法去写样式啦。。。
写好以后 在当前目当（就是刚才新建styl文件的那个目录）打开命令行，
如果要在当前目录输出生成css文件
输入 stylus -w demo.styl 按回车
如果要在指定的目录输出生成css文件
输入 stylus -w demo.styl -o 目录地址 按回车
注：
-w 是自动监视文件。
-o 是将编译后的CSS文件输出到指定文件中。
然后。。。。。 就多出一个相同名字的.css文件啦。 到此在大功告成。
注：
只要命令行工具不关闭，当你更改了styl文件中的样式后，它会自动同步生成到.css文件中去（前提：生成时加上了 -w参数）
编写：
一、变量 （以 “ $ ” 开头，也可无前缀符号直接声明变量）
var = 10 //支持多样性的CSS语法
。
二、后缀名（默认使用
.styl 的作为文件扩展名）
文件名.styl
三、混合（Mixins）
Mixins是CSS预处理器中语言中最强大的特性。Mixins可以将一部分需重用的样式抽出，只需定义一次，就可被很多选择器重复使用,直接定义Mixins名，然后在定义参数和默认值之间用等号（=）来连接。
例如：
声明混合
setColor(mainC=#000) {
color : mainC ;
}
直接以默认值调用混合
.sBox {
setColor();
}
调用混合且传入自定义参数值
.bBox {
setColor(#fff);
}
四、嵌套实现后代选择器 （嵌套语法是相同的，可以通过大括号“{}”之间的层次关系实现嵌套， 也可以不用大括号“{}”，用缩进。还可以使用“&”符号来引用父选择器。）
普通写法：
html, body{
width: 100%; height: 100%;
}
*{
margin: 0px; padding: 0px;
}
.box{
width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;
}
.box .header{
position: absolute: top:0px; left:0px; width: 100%; height: 50px;background: green;
}
.box .main{
position: absolute; top: 50px; left: 0px; bottom: 50px; right: 0px; background: blue; overflow-y: scroll; -webkit-overflow-scrolling: touch;
}
.box .footer{
position: absolute; left:0px; bottom: 0px; width: 100%; height: 50px; background: red;
}
.box .footer ul{
display: flex;
}
.box .footer li{
flex: 1; line-height: 50px; text-align: center; border-right: 1px solid white ;
}
stylus写法：
html, body
width: 100%; height: 100%;
*
margin: 0px; padding: 0px;
.box
width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;
.header
position: absolute: top:0px; left:0px; width: 100%; height: 50px;background: green;
.main
position: absolute; top: 50px; left: 0px; bottom: 50px; right: 0px; background: blue; overflow-y: scroll; -webkit-overflow-scrolling: touch;
.footer
position: absolute; left:0px; bottom: 0px; width: 100%; height: 50px; background: red;
ul
display: flex; list-style: none;
& > li
flex: 1; line-height: 50px; text-align: center; border-right: 1px solid white ;
五、继承(Inherit) （当我们需要为多个元素定义相同样式的时候，我们可以考虑使用继承的做法。使用“@extend”开始，后面紧跟被继承的选择器。）
例如：
.block{ margin: 10px 20px; padding: 4px; font-size:16px; color: #666;}
.div{ @extend.block; width: 100px; height: 200px;}
ul > li { @extend.block; }
编译后的结果：
六、条件语句 （与其它编程语言类似，不过可以省略大括号）
例如：
type = link;
p{
if type == link
color:blue;
else
color:green;
编译后的结果：
p{
color:blue;
}
七、循环语句 （使用for/in对表达式进行循环）
例如：
for i in 1 2 3
.item-{i}
width 2em * i
编译后的结果：
.item-1 {
width : 2em ;
}
.item-2 {
width : 4em ;
}
.item-3 {
width : 6em ;
}
八、总结
1、Stylus具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性；
2、可以通过缩进表示层次与嵌套关系；
3、具 有类似于其它语言的作用域概念；
4、具有类似其它语言的条件语句、循环语句等；
5、可以基于NodeJS NPM下载相应库后进行编译；