【css预编译器】stylus入门学习
随着前端技术不停在发展，对我们前端人员的要求也不仅仅在于写页面，除了数据交互外，我们对于基本的css、html更好的使用，才会使我们开发起来游刃有余。
阅读了很多stylus以及sass和less的介绍，就来简单记录一下stylus吧。
stylus官网:stylus-lang.com
1.简单介绍
简单来说stylus就是一种针对css的开发语言，想必大家在写css的时候很烦去查一个颜色的16进制，或者重复写一些相同的代码，那么我们就需要这样一种语言，将逻辑、函数等融入css中，让我们更加方便高效的去开发前端页面，stylus起源于node社区，通俗来说，你用函数的形式写完了一个css，可是浏览器不认识，接下来就由预编译工具将代码编译成普通的css代码。
2.语法
先说一下安装
$ npm install stylus安装好node之后，执行这个命令就可以使用stylus
----
stylus语法重点介绍下面几部分：
1）可以省略花括号和分号，例如：
.content
color: #000
font-size:400
2) 引入变量，先声明变量，在下面使用的时候可以直接取用，例如：
marginBorder = 10px；
.content
color: #000
font-size:400
margin-left marginBorder ------------> 编译结果：margin-left:10px;
3)混合（mixins）
这一点是比较重要的特性。
你可以把它的作用理解为将一部分样式拿出来，组成一个可重复使用的样式模块，这样你就大大提升了效率，本人认为，写代码的体验也提高了不少
showImg（imgUrl）{
background-img: url（imgUrl）；
}
接下来我们看如何使用：
.avater
showImg("/src/img/logo.png");
现在看到这样我们感觉反倒麻烦，但是你想，要是一个电商平台的话，有很多图片，重复使用还是性价比较高的。
4）嵌套
关于嵌套的话，可以这样去理解，我们平常在写css时，如果dom较为复杂且很多重复的元素，写选择器的时候，我们要从外层找到最里层这样就很容易发生错误，stylus给我们提供了类似于树形结构的书写模式，增强了它的结构性，我们也方便去维护。例如下面：
平常我们的css:
.content{
xx
}
.content span{
yy
}
.content span#contentList{
zz
}
现在我们可以这样写
.content
xx
span
yy
.contentList
zz
组织结构一目了然，也便于书写管理
5）extend继承
css中如果有几个模块样式相同，我们把他们写在一起然后命名,这就是继承，如下：
.header,.content,.footer{
vvvvvvvv
}
而在stylus中更像一种函数的形式,如下:
.header
vvvv
.content
@extend .header
uuuuuuu
在这里，content就继承了header的全部属性
6)可以使用条件语句
先声明验证条件
box（x,y,margin = false）
padding y x
if margin
margin y x
写一个box的复用样式函数传入三个参数，如果margin传的时true就执行margin y x 这部分，否则执行padding那部分
使用:
body
box(5px,10px,true)
编译后的结果：
body{
margin: 5px 10px;
}
像其他循环语句也能用在stylus中，这里不多说了，自己有兴趣去看看官网吧（stylus-lang.com）
总结：stylus的出现，就是一些前端大佬不想做这些无聊的工作（写重复的样式）而衍生的，在这里感谢这些nodeJs社区的大佬为我们提供了便利，助我们在前端这条路上越走越远。
最后有兴趣的同学可以看看底下这篇，比较详细，我也是看了之后写的这篇博客，希望对你有用.
http://caibaojian.com/sass-less-stylus.html