:root{
--base: yellow;
--spacing: 10px;
--blur: 10px;
}
上面代码定义了3个变量,:root使得所有人可访问
img{
filter: blur(var(--blur));
padding: var(--spacing);
background: var(--base);
}
上面使用了之前定义的变量作为属性值
还可以通过js改变变量的值,从而改变属性
document.documentElement.style.setProperty(`--${this.name}`,this.value + suffix)
其中:
${this.name}是解析变量的写法