vue的css预处理器stylus

简介

css出了sass、less预处理器外，vue使用更加简单的写法预处理器stylus。
全面的 stylus 知识可以参考官方文档，或者张鑫旭翻译的中文文档。
stylus的花括号和分号是可以省略的，不仅如此，冒号也是可以省略的，color: powderblue 你可以写成 color powderblue,没有问题。

---

安装

前提已经安装了nodejs。

$ npm install stylus

安装之后，运行stylus -h 可查看帮助。
运行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;
}

为何会编译成如此css代码，下面会解释如此。

---

变量

$background-color = lightblue

上面的代码声明了变量 $background-color,并为其赋值 lightblue。
声明之后，就可以使用这个变量了：

span
    background-color: $background-color

转换成css就是

span{
    background-color: lightblue;
}

函数

add (a, b = a)
    a = unit(a, px)
    b = unit(b, px)
    a + b

代码声明了函数 add, add 接受两个参数 a 和 b，其中 b 的默认值是 a。
add 中调用了 stylus 的内置函数 unit，此处，unit 函数为 a 和 b赋予了单位 px。
最后将 a 和 b 相加，并返回结果，是的，你没有看错，没有 return，但是返回了结果。
return 居然是可以省略的，很任性了。
函数调用：

span
    margin: add(10)
    padding: add(10, 5)

转换css就是

span {
    margin: 20px;
    padding: 15px;
}

选择器&

&是父级的引用，还是来看代码。

.list-item
.text-box
    &:hover
        background-color: powderblue

转换成 CSS ：

.list-item:hover,
.text-box:hover {
  background-color: #b0e0e6;
}

相信代码中已经能很明确地体现出 & 父级引用的角色了。

同时，我们也不难看出，.list-item 和 .text-box 这两个同一级的选择器在 stylus 中是可以换行写的，只要保证缩进相同，它们就属于同一级的选择器。当然，沿用 CSS 的方式，将同一级的选择器用逗号分隔开在 stylus 中也是可以的。