前端如何使用css变量

辰漪
2021-12-23 / 0 评论 / 20 阅读 / 正在检测是否收录...

原生css变量

1. 在html节点定义变量,变量以--name的形式

html {
    --bg-color: red
}

2. 使用var()调用变量

.box {
    background: var(--bg-color)
}

使用预处理器

1. scss

定义变量以$符号开头

$base-color: #c6538c;

使用变量

.alert {
  border: 1px solid $border-dark;
}

2. less

定义变量以$符号开头

@link-color:  #428bca;

使用变量

a {
    color: @link-color;
}
2
选择打赏方式:
微信

评论 (0)

取消