学习笔记-原生CSS变量

原生CSS变量

不用Less、Sass等预处理插件，原生的CSS也支持变量，用于批量修改逻辑相关的DOM的Style的某一个属性值

• 语法
• 示例

---

语法

• 定义变量
  与js一样，变量都是由作用域的，css变量的作用域就是DOM的层级关系，定义在某一选择器内，变量名称以–开头，值与普通属性值一样，类似’20px’ ‘red’

:root {
    --color: red
}

在文档的根元素的作用域范围内定义了名为–color的变量，值为red，在html元素包裹内的任意元素都可使用–color变量，变量是可以被继承的。同时多重变量申明，变量的作用域也受选择器优先级的影响。

        div {
            --color: red;
            background-color: var(--color);
            width: 200px;
            height: 200px;
        }
        
        .class1 {
            --color: black;
            background-color: var(--color);
            width: 100px;
            height: 100px;
        }
        
        #id1 {
            --color: green;
            background-color: var(--color);