学习笔记-原生CSS变量

最新推荐文章于 2024-07-02 08:29:36 发布

波帝伯爵

最新推荐文章于 2024-07-02 08:29:36 发布

阅读量1.1k

点赞数 2

分类专栏：前端学习笔记文章标签： css 变量

本文链接：https://blog.csdn.net/HYB2012/article/details/80296258

版权

本文介绍了原生CSS变量的使用，包括语法、示例和如何修改变量。通过定义和使用变量，可以在不依赖预处理插件的情况下实现CSS样式批量修改。变量遵循DOM层级作用域，可被继承，并可以通过JavaScript进行动态修改。

摘要由CSDN通过智能技术生成

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