什么是css变量
CSS 变量(CSS Variables),也称作 CSS 自定义属性(CSS Custom Properties),是通过前缀 "--
+ 属性名"定义的变量,定义时需要赋值。然后根据变量名称通过 var()
函数使用,如
var(--height)
var(--height,700px) //第二个参数选填,第一个参数失效时启用第二个
css变量使用及作用域
css变量根据作用域可以在 :root 和 选择器中定义
:root 匹配文档树的根元素,相当于html选择器,在:root中设置的变量全局可用
同名 CSS 变量,可以在多个选择器内声明,读取顺序与 CSS 匹配规则一致,优先级最高的生效,变量的覆盖规则由 CSS 选择器权重决定。如:root和.content中都设置了--border-color,.content及子元素下 #fff 生效,其他 #000生效。也就是在.content下面声明的变量,只能在.content以及他的子元素下面才有效。
:root {
--border-color: #00; // 全局作用域下颜色
}
.content {
--border-color: #fff; // content作用域下颜色
border: 1px solid var(--border-color);
.box-inner {
border: 1px solid var(--border-color); // 继承父元素
}
}
css变量使用场景
1. 设置主题色,全局引入theme.css 通过body是否包含 .dark类,设置页面light和dark
:root {
--theme-color: #fff;
--theme-border-color: #000;
--theme-font-color: #000;
.dark {
--theme-color: #000;
--theme-border-color: #fff;
--theme-font-color: #fff;
}
}
2.响应式布局
:root {
--theme-color: #000;
}
@media screen and (max-width: 600px) {
:root {
--theme-color: #fff;
}
}