Stylus 富于表现力 健壮 功能丰富的 CSS 预处理器 - 文章教程

Stylus 富于表现力 健壮 功能丰富的 CSS 预处理器

发布于 2020-02-16 字数 4486 浏览 1287 评论 0

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

Stylus 富于表现力 健壮 功能丰富的 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 接受两个参数 ab,其中 b 的默认值是 a
add 中调用了 stylus 的内置函数 unit,此处,unit 函数为 ab赋予了单位 px
最后将 ab 相加,并返回结果,是的,你没有看错,没有 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 的基本使用,普遍情况可以用上。

中文文档:https://www.wenjiangs.com/docs/stylus-docs

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0