CSS原生变量使用教程和几个Tips
CSS使用教程
2017年3月，Edge浏览器支持CSS变量。
声明
变量名前面要加两根连词线(--)
body {
--foo: #7F583F;
--bar: #F7EFD2;
}上面代码中有两个变量，--foo 和 --bar（为什么用--？因为$被Sass用了，@被less用了）
各值都可以放入CSS变量，比如变量名中带-。
变量名大小写敏感。
var()函数
var()函数用于读取变量，也可用于变量声明，只能作为属性值，不能用作属性名。
a {
color: var(--foo);
text-decoration-color: var(--bar);
}
:root {
--primary-color: red;
--logo-text: var(--primary-color);
}var函数第二个参数，表示变量的默认值。参数可以带逗号和空格。
color: var(--foo, #7F583F);
var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);变量值的类型
字符串：可以与其它字符串进行拼接。
--bar: 'hello';
--foo: var(--bar)' world';数值：不能与数值单位直接连用，必须使用calc()函数。如果变量值带有单位，不能写成字符串，直接写：--foo: 20px;
.foo {
--gap: 20;
/* 无效 */
margin-top: var(--gap)px;
}
.foo {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}作用域
同一个CSS变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与CSS的“层叠”规则是一致的。
蓝色
绿色
红色变量的作用域就是它所在的选择器的有效范围，全局的变量通常放在根元素:root里面，确保任何选择器都可以读取。
响应式布局
可以在media命令里声明变量，使得不同的屏幕宽度有不同的变量值。
body {
--primary: #7F583F;
--secondary: #F7EFD2;
}
a {
color: var(--primary);
text-decoration-color: var(--secondary);
}
@media screen and (min-width: 768px) {
body {
--primary: #F7EFD2;
--secondary: #7F583F;
}
}兼容性处理
不支持CSS变量的浏览器，采用以下写法：
a {
color: #7F583F;
color: var(--primary);
}
也可以使用@supports命令进行检测。
@supports ( (--a: 0)) {
/* supported */
}
@supports ( not (--a: 0)) {
/* not supported */
}JS操作
检测浏览器是否支持CSS变量。
const isSupported =
window.CSS &&
window.CSS.supports &&
window.CSS.supports('--a', 0);
if (isSupported) {
/* supported */
} else {
/* not supported */
}操作CSS变量。
// 设置变量
document.body.style.setProperty('--primary', '#7F583F');
// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'
// 删除变量
document.body.style.removeProperty('--primary');JS可以将任意值存入样式表，也可以读取任意CSS变量值。CSS变量提供了一种JS与CSS通信的一种途径。
tips
currentColor
当前文本颜色。
.xxx { border: 1px solid currentColor; }应用：icon和a标签一起变色
伪元素 Content
/* 无效 */
.bar::before {
content: var(--percent);
}解决：利用CSS计数器呈现 CSS var 变量的值。content属性本身不支持变量，但是count-reset属性后面的计数器初值是支持的。
/* 有效 */
.bar::before {
counter-reset: progress var(--percent);
content: counter(progress);
}本文主要参考：
http://www.ruanyifeng.com/blog/2017/05/css-variables.html
https://www.zhangxinxu.com/wordpress/2014/10/currentcolor-css3-powerful-css-keyword/
https://www.zhangxinxu.com/wordpress/2019/05/content-css-var/