stylus

# 4. stylus使用

stylus安装使用
1. 脚手架中使用 1. npm install stylus stylus-loader
2. style标签设置: lang="stylus" rel="stylesheet/stylus"

stylus语法介绍

特点

简写大括号
简写封号

样式嵌套，层级明显

#app
    h1
      color $color
    .btn1
      btnStyle(100px, 100px, red)
    .btn2
      btnStyle(200px, 200px, blue)
    .content
      font-size 24px
      &.content1
        color $color·

1
2
3
4
5
6
7
8
9
10
11

定义变量：复用
```
$color = red
```
1
定义混合（mixins）：代码复用，提高效率，灵活度高，等同于js的函数
```
 btnStyle(w, h, bg)
    width w
    height h
    background bg
    border none
```
1
2
3
4
5

定义函数: 可进行计算，灵活度更高

// 定义函数
add(a, b)
    a + b
// 使用函数
padding add(10px, 20)

1
2
3
4
5

父级引用

语法：&

作用：在子元素中能够找到父级元素

 #app
    h1
      color $color
    .btn1
      btnStyle(100px, 100px, red)
    .btn2
      btnStyle(200px, 200px, blue)
    .content
      font-size 24px
      &.content1
        color $color

1
2
3
4
5
6
7
8
9
10
11

导入文件
```
  1. 语法: @import ''xx'
```
其他: [ https://stylus.bootcss.com/ ](

编辑

上次更新: 2021/07/01, 20:33:02

← 「css技巧」使用hover和attr()定制悬浮提示