stylus

目录

vue项目中用stylus

stylus 语法

stylus 安装

变量

函数

选择器

---

 

vue项目中用stylus

stylus 语法

stylus 安装

npm install stylus
stylus -h   #可查看帮助

变量

$background-color = lightblue

函数

add (a, b = a)
    a = unit(a, px)
    b = unit(b, px)
    a + b

选择器

•  id 选择器   class 选择器  标签选择器 伪类选择器  伪元素选择器
• 花括号和分号在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;
}