CSS variables变量

官方的规范把它们称作作为级联变量的CSS自定义属性(CSS custom properties for cascading variables)。
定义变量
在自定义属性前添加双横线前缀，然后像给普通CSS设值一样，给自定义属性设值。在上面的代码中，我给一个叫做--my-cool-backgroud的自定义属性设置了一个颜色值。

<style>
    :root {
        --my--blog--background: red;
        --my--blog--height:100px;
        --my--blog--width:200px;
    }

    div {
        background: var(--my--blog--background);
        height: var(--my--blog--height);
        width: var(--my--blog--width);
    }

</style>

自定义属性作用于CSS选择器中，val()可被当成一个真正的CSS属性一样使用。

还可以从通过利用CSS变量获得另一个CSS变量的值。

例如：

CSS变量是区分大小写的

CSS变量受级联关系影响