Stylus基本使用

介绍

stylus，是 CSS 的预处理框架。

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

安装

安装 Stylus 很简单，前提是你已经安装了 Node.js。 到 Node.js 官网下载适合你的操作系统的安装包安装即可。还要检查一下 npm 是否也一并安装了。

然后，在命令行中执行如下指令：

$ npm install stylus -g

安装之后，运行 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;
}

由此我们看到了 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 的分号，却多了一些奇奇怪怪的缩进，还有那个 & 是什么？还 &: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 中也是可以的。

 

来源：https://www.jianshu.com/p/5fb15984f22d