stylus的使用

介绍

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

安装

安装 stylus（确保之前已经安装 nodejs ）

使用命令行工具
$ npm install stylus

在HBuilder中使用stylus语言则需安装该插件才可解析

1、工具=>插件安装

2、选择stylus编译进行安装

安装完成后HBuilder便可解析编译

基本使用

$background-color = lightblue//声明了变量$background-color，并为其赋值为lightblue
add (a, b = a)//声明了函数 add, add 接受两个参数 a 和 b，其中 b 的默认值为 a。
    a = unit(a, px)//add中调用了 stylus 的内置函数 unit，unit 函数为 a 和 b赋予了单位 px
    b = unit(b, px)
    a + b// a 和 b 相加，并返回结果

.list-item
.text-box
    span
        background-color: $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编写的代码中花括号和分号是可以省略的，冒号也是可以省略的，color: red 你可以写成 color red没有问题。

父子选择器，stylus 中以缩进表示这种关系

&:它是父级的引用

同一级的选择器在 stylus 中是可以换行写的，只要保证缩进相同，它们就属于同一级的选择器。也可沿用 CSS 的方式，将同一级的选择器用逗号分隔开在 stylus 中也是可以的。

其他详细信息可查看 官方文档 进行阅读学习