CSS variables

Original

CSS variables is named as CSS Custom Properties. Variables in CSS should be declared within a CSS selector that defines its scope. For a global scope you can use either the :root or the body selector.

The variable name must begin with two dashes (–) and is case sensitive!

The syntax of the var() function is as follows:

var(custom-name, value)

e.g.

/* 不使用CSS变量 */
.title {
    background-color: red;
}
.desc {
    background-color: red;
}

/* 使用CSS变量 */
:root {
    --bg-color: red;
}
.title {
    background-color: var(--bg-color);
}
.desc {
    background-color: var(--bg-color);
}

e.g. change skin theme:

["red", "blue", "green"].forEach(v => {
    const btn = document.getElementById(`${v}-theme-btn`);
    btn.addEventListener("click", () => document.body.style.setProperty("--bg-color", v));
});

Advantages:
减少样式代码的重复性
增加样式代码的扩展性
提高样式代码的灵活性
增多一种CSS与JS的通讯方式
不用深层遍历DOM改变某个样式

Compared with SASS & LESS:
浏览器原生特性，无需经过任何转译就可直接运行
DOM对象一员，极大便利了CSS与JS之间的联系

---

声明：–变量名
读取：var(–变量名, 默认值)
类型
普通：只能用作属性值不能用作属性名
字符：与字符串拼接 “Hello, “var(–name)
数值：使用calc()与数值单位连用 var(–width) * 10px

作用域

范围：在当前元素块作用域及其子元素块作用域下有效
优先级别：内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

---

to be continued…