css var()的使用

css var()的使用

var()函数可以代替元素中任何属性中的值的任何部分

var( <custom-property-name> , <declaration-value>? )

• 第一个参数为自定义属性值的名称
• 后面的value表示第一个属性值无效时的默认值

.component {
  --text-color: #080;
}

.component .text {
  color: var(--text-color, black); /* 此处 color 正常取值 --text-color */
}
.component .header {
  color: var(--header-color, blue); /* 此处 color 被回退到 blue */
}