前端如何使用css变量

原生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;
}