Stylus基本使用

╰半橙微兮° 2021-11-14 14:32 390阅读 0赞

[原文链接][Link 1]

## 介绍 ##

这个哥们儿学名叫 stylus，是 CSS 的预处理框架。

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

## 安装 ##

首先，安装 stylus（确保之前已经安装 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; }

由此我们看到了 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 知识可以参考[官方文档][Link 2]，或者张鑫旭翻译的[中文文档 ][Link 3]。

[Link 1]: https://www.jianshu.com/p/5fb15984f22d
[Link 2]: http://stylus-lang.com/
[Link 3]: http://www.zhangxinxu.com/jq/stylus/