介绍
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