CSS变量--个人理解

他是以一个杠杠开头的,然后我们引入这个变量的时候通过var这个关键词来进行引用的,这个是ES6新出的属性

CSS 变量

var() 函数用于插入 CSS 变量的值。

CSS 变量可以访问 DOM，这意味着您可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。

使用 CSS 变量的一种好方法涉及设计的颜色。您可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。

传统方式

  * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            height: 40px;
            background-color: #333;
        }

        .w {
            width: 1226px;
            margin: auto;
        }

        .nav {
            height: 100px;
            background-color: #ffc0cb;
        }

        .banner {
            height: 460px;
            background-color: #87ceeb;
        }

        .left {
            float: left;
            width: 234px;
            height: 460px;
            background-color: #ffa500;
        }

        .right {
            float: right;
            width: 992px;
            height: 460px;
        }

var() 函数的语法

var() 函数用于插入 CSS 变量的值。

var() 函数的语法如下：``` var(name, value)

| *name*  | 必需。变量名（以两条破折号开头）。  
| *value* | 可选。回退值（在未找到变量时使用）。
这里注意啦：变量名称必须以两个破折号（--）开头，且区分大小写！

写法:

body { background-color: var(--blue); }

h2 { border-bottom: 2px solid var(--blue); }