Stylus基本使用

介绍

在学习一个Vue.js项目的过程中，注意到源码中样式的部分并没有用熟悉的.css样式文件，而是发现了代码长得和css相像的.styl文件。这个.styl以前没见过啊，你是谁？于是开始一顿搜索。

发现文件后缀是.styl的这个哥们儿学名叫stylus，是css的预处理框架。

css预处理，顾名思义，预先处理css。那stylus咋预先处理呢？stylus给css添加了可编程的特性，也就是说，在stylus中可以使用变量、函数、判断、循环一系列css没有的东西来编写样式文件，执行这一套骚操作之后，这个文件可编译成css文件。

安装

首先，安装stylus（确保之前已经安装nodejs）。

$ npm install stylus

安装之后，运行stylus -h 可查看帮助。
运行stylus example.styl可将example.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代码以及由它编译而成的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
	span
		background-color: $background-color
		margin: add(10)
		padding: add(10, 5)
	&:hover
		background-color: powderblue

这一段是与css代码长得最像的了，虽说最为相像，可有些差别还是一眼就能看出的。
比如没有了css的花括号，没有了css的分号，却多了一些奇奇怪怪的缩进，还有那个&是什么鬼？还&:hover???
预知后事如何，这次接着分解。

先说符号，这里提到的花括号和分号在stylus中是可以省略的，不仅如此，冒号也是可以省略的，color: powderblue你可以写成color powderblue,没有问题。

再说缩进，先提出两个有缩进关系的选择器，上面代码片段第二行的.text-box和第三行的span，其实很容易理解，这哥俩写到css里面是这样的：

.text-box span{ ... }

即span是.text-box的子选择器，stylus中以缩进表示这种关系，更加清晰明了，好看。

还有&，这是个新鲜东西。它是父级的引用，还是来看代码。

stylus这样写:

.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中也是可以的。

总结

上面就是stylus的基本使用，普遍情况可以用上。
全面的stylus知识可以参考官方文档，或者张鑫旭翻译的中文文档 。