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