Stylus：一款能改变网站样式的样式管理器
-插件介绍
Stylus是一款能改变网站样式的样式管理器，该插件主要能将他人提供的网页样式或自己编写的样式安装在网页中，在不改变网页整体布局的情况下将其变成使用者需要的样子。在安装了该插件后，使用者可以在插件提供的网站上下载其他网站的样式进行安装，也可以自己编写一些样式代码来调整网页，若是这些样式在安装后出现了一些问题，还可以直接通过插件的选项窗口来管理或一键禁用这些样式。
-插件功能
1、通过安装主题和外观来改变网站的外观。
2、与userstyles上托管的大量样式兼容。
3、支持自动更新已安装的
-使用方法
一段简单的 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 就是：
spa {
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 中也是可以的。
