CSS中定义变量，并使用变量设置属性值

    :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}是解析变量的写法