建立好项目后我们来安装stylus
npm install stylus stylus-loader --save-dev
这样就安装上了stylus。 接下来就可以使用了，使用方式分两种。一种是在.vue文件的style块中使用，一种是引用.styl文件的形式
一、选择器
缩排（基于缩进代替大括号，空格代替冒号）当然按之前css写也是可以的
规则集：使用逗号为多个选择器同时定义属性，使用新行也是一样的效果
textarea, input
border 1px solid #eee
//新行
textarea
input
border 1px solid #eee
父级引用：字符&指向父选择器。下面这个例子，我们两个选择器(textarea和input)在:hover伪类选择器上都改变了color值
textarea
input
color #A7A7A7
&:hover
color #
消除歧义：类似padding - n的表达式可能既被解释成减法运算，也可能被释义成一元负号属性。为了避免这种歧义，用括号包裹表达式。
有Stylus无法处理的属性值？unquote()可以帮你：
filter unquote('progid:DXImageTransform.Microsoft.BasicImage(rotation=1)')
//生成为：
filter progid:DXImageTransform.Microsoft.BasicImage(rotation=)
二、变量
我们可以指定表达式为变量，然后在我们的样式中贯穿使用。标识符（变量名，函数等），也可能包括$字符。
变量甚至可以组成一个表达式列表
font-size = 14px
font = font-size "Lucida Grande", Arial
body
font font sans-serif
//编译为：
body {
font: 14px "Lucida Grande", Arial sans-serif;
}
Stylus有另外一个很酷的独特功能，不需要分配值给变量就可以定义引用属性。下面是个很好的例子，元素水平垂直居中对齐（典型的方法是使用百分比和margin负值），如下：
#logo
position: absolute
top: %
left: %
width: w = 150px
height: h = 80px
margin-left: -(w / )
margin-top: -(h / )
我们不使用这里的变量w和h，而是简单地前置@字符在属性名前来访问该属性名对应的值：
#logo
position: absolute
top: %
left: %
width: 150px
height: 80px
margin-left: -(@width / 2)
margin-top: -(@height / 2)
属性会“向上冒泡”查找堆栈直到被发现，或者返回null（如果属性搞不定）。下面这个例子，@color被弄成了blue。
body
color: red
ul
li
color: blue
a
background-color: @color
三、插值
Stylus支持通过使用{}字符包围表达式来插入值，其会变成标识符的一部分。例如，-webkit-{'border' + '-radius'}等同于-webkit-border-radius。比较好的例子就是私有前缀属性扩展：
vendor(prop, args)
-webkit-{prop} args
-moz-{prop} args
{prop} args border-radius()
vendor('border-radius', arguments) box-shadow()
vendor('box-shadow', arguments) button
border-radius 1px 2px / 3px 4px //变身：
button {
-webkit-border-radius: 1px 2px / 3px 4px;
-moz-border-radius: 1px 2px / 3px 4px;
border-radius: 1px 2px / 3px 4px;
}
选择器插值：插值也可以在选择器上起作用。例如，我们可以指定表格前5行的高度，
table
for row in
tr:nth-child({row})
height: 10px * row
//解析为
table tr:nth-child() {
height: 10px;
}
table tr:nth-child() {
height: 20px;
}
table tr:nth-child() {
height: 30px;
}
table tr:nth-child() {
height: 40px;
}
table tr:nth-child() {
height: 50px;
}
四、运算符
提供包含界线操作符(..)和范围操作符(...)
.. // => 1 2 3 4 5
... // => 1 2 3 4
二元加乘运算其单位会转化，或使用默认字面量值
乘除：/ * %（在属性值内使用/时候，你必须用括号包住。否则/会根据其字面意思处理）
font: (14px/1.5);
真与假：Stylus近乎一切都是true，包括有后缀的单位，甚至0%、0px等都被认作true。不过，0在算术上本身是false。表达式（或“列表”）长度大于1被认为是真。
//true例子：
%
0px
1px
-
-1px
hey
'hey'
( )
('' '') //false例子： null
false
''
存在操作符in：检查左边内容是否在右边的表达式中。
//元组同样适用：
vals = (error 'one') (error 'two')
error in vals
// => false
(error 'one') in vals
// => true
混合书写适用例子：
pad(types = padding, n = 5px)
if padding in types
padding n
if margin in types
margin n body
pad() body
pad(margin) body
pad(padding margin, 10px)
//对应于：
body {
padding: 5px;
}
body {
margin: 5px;
}
body {
padding: 10px;
margin: 10px;
}
条件赋值操作符?=（别名?:）让我们无需破坏旧值（如果存在）定义变量。该操作符可以扩展成三元内is defined的二元操作。
color ?= white
color = color is defined ? color : white
实例检查：is a：Stylus提供一个二元运算符叫做is a，用做类型检查。
is a 'unit'
// => true
#fff is a 'rgba'
// => true
is a 'rgba'
// => false
//另外，我们可以使用type()这个内置函数。
type(#fff) == 'rgba'
// => true
//注意：color是唯一的特殊情况，当左边是RGBA或者HSLA节点时，都为true.
变量定义：is defined：此伪二元运算符右边空荡荡，左边无计算。用来检查变量是否已经分配了值。
foo is defined
// => false
foo = 15px
foo is defined
// => true
#fff is defined
// => 'invalid "is defined" check on non-variable #fff'
该操作符必不可少，因为一个未定义的标识符仍是真值。
body
if ohnoes
padding 5px
//当未定义的时候，产生的是下面的CSS
body {
padding: 5px;
}
//显然，这不是我们想要的，如下书写就安全了：
body
if ohnoes is defined
padding 5px
颜色操作：颜色操作提供了一个简洁，富有表现力的方式来改变其组成。例如，我们可以对每个RGB：
#0e0 + #0e0
// => #0f0
另外一个例子是通过增加或减少百分值调整颜色亮度。颜色亮，加；暗，则减。
# + %
// => #c3c3c3
# - %
// => #444
五、混合书写(Mixins)
Mixins是预处器中的函数。平时你在写样式时肯定有碰到过，某段CSS样式经常要用到多个元素中，这样你就需要重复的写多次。在CSS预处器中，你可以为这些公用的CSS样式定义一个Mixin，然后在你CSS需要使用这些样式的地方，直接调用你定义好的Mixin。这是一个非常有用的特性。Mixins是一个公认的选择器，还可以在Mixins中定义变量或者是默认参数。可以不使用任何符号，就是直接定义Mixins名，然后在定义参数和默认值之间用等号（=）来连接。
/* Stylus 定义了一个名叫error的mixin，这个error设置了一个参数“$borderWidth”,在没特别定义外，这个参数的值是默认值2px */
error(borderWidth= 2px) {
border: borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
error(); /* 调用error mixins */
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
error(5px); /* 调用error mixins，并将参数$borderWidth的值指定为5px */
}
1、混入
混入和函数定义方法一致，但是应用却大相径庭。例如，下面有定义的border-radius(n)方法，其却作为一个mixin（如，作为状态调用，而非表达式）调用。当border-radius()选择器中调用时候，属性会被扩展并复制在选择器中。
border-radius(n)
-webkit-border-radius n
-moz-border-radius n
border-radius n form input[type=button]
border-radius(5px)
//编译为
form input[type=button] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
使用混入书写，你可以完全忽略括号，提供梦幻般私有属性的支持。
border-radius(n)
-webkit-border-radius n
-moz-border-radius n
border-radius n form input[type=button]
border-radius 5px
注意到我们混合书写中的border-radius当作了属性，而不是一个递归函数调用。
更进一步，我们可以利用arguments这个局部变量，传递可以包含多值的表达式。
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments
现在，我们可以像这样子传值：border-radius 1px 2px / 3px 4px!
2、父级引用
混合书写可以利用父级引用字符&，继承父业而不是自己筑巢。例如，我们要用stripe(even, odd)创建一个条纹表格。even和odd均提供了默认颜色值，每行也指定了background-color属性。我们可以在tr嵌套中使用&来引用tr，以提供even颜色。
stripe(even = #fff, odd = #eee)
tr
background-color odd
&.even
&:nth-child(even)
background-color even
//如果你愿意，你可以把stripe()当作属性调用。
stripe #fff #
3、混合书写中的混合书写
自然，混合书写可以利用其它混合书写，建立在它们自己的属性和选择器上。
inline-list()
li
display inline comma-list()
inline-list()
li
&:after
content ', '
&:last-child:after
content '' ul
comma-list()
六、方法(Functions)
1、函数：Stylus强大之处就在于其内置的语言函数定义。其定义与混入(mixins)一致；却可以返回值。
2、返回值：
//很简单的例子，两数值相加的方法：
add(a, b)
a + b //我们可以在特定条件下使用该方法，如在属性值中：
body
padding add(10px, ) //渲染：
body {
padding: 15px;
}
3、默认参数：可选参数往往有个默认的给定表达。在Stylus中，我们甚至可以超越默认参数。
add(a, b = a)
a + b add(, )
// => 15
add()
// => 20
4、多个返回值：Stylus的函数可以返回多个值，就像你给变量赋多个值一样。
//下面就是一个有效赋值：
sizes = 15px 10px
sizes[]
// => 15px //类似的，我们可以在函数中返回多个值：
sizes()
15px 10px
sizes()[]
// => 15px
5、别名：给函数起个别名，很简单，直接等于就可以了。例如上面的add()弄个别名plus(), 如下：
plus = add
plus(, )
// => 3
6、变量函数：我们可以把函数当作变量传递到新的函数中。例如，invoke()接受函数作为参数，因此，我们可以传递add()以及sub()。
invoke(a, b, fn)
fn(a, b)
add(a, b)
a + b
body
padding invoke(, , add)
padding invoke(, , sub)
//结果：
body {
padding: ;
padding: -;
}
7、参数：arguments是所有函数体都有的局部变量，包含传递的所有参数。
sum()
n =
for num in arguments
n = n + num sum(,,,,)
// => 15
8、哈希示例：下面，我们定义get(hash, key)方法，用来返回key值或null。我们遍历每个键值对，如果键值匹配，返回对应的值。
hash = (one ) (two ) (three ) get(hash, two)
// => 2
get(hash, three)
// => 3
get(hash, something)
// => null