Stylus基本使用

安装

npm install stylus -g

变量

可以将表达式赋值给变量，然后在整个样式表中使用变量（可加标识符$）

 font-size = 14px
 body
   font font-size Arial, sans-serif

$background-color = blue
span
    background-color: $background-color

函数

声明add() 函数，内置 unit() 函数把所有参数的数值单位都变成 px

add (a, b = a)
    a = unit(a, px)
    b = unit(b, px)
    a + b
    
span
    margin: add(10)
    padding: add(10, 5)

翻译成 CSS 就是：

span {
    margin: 20px;
    padding: 15px;
}

定义混合

//a.styl
clearfix()
  &::after
    content ''
    display block
    clear both

@import "a.styl"//引入

.class1
.class2
  clearfix()//使用
  &:hover
    background-color: #ccc

选择器

&表示父级的引用

.class1
.class2
  &:hover
    background-color: #ccc

翻译成 CSS 就是：

.class1:hover,
.class2:hover {
  background-color: #ccc;
}

编译

使用webstorm自动编译