CSS变量

什么是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;
    }
}