解释它的简单方法是；将变量引入 css（这是 sass 等预处理器的一个特性）和具有类似行为的功能的 mixin（也在预处理器中）。

想象这--header-theme是一个函数（mixin）

:root {
  --header-theme: {
    color: red;
    font-family: cursive;
    font-weight: 600;
  };
}

h1 {
  @apply --header-theme;
}


h2 {
  @apply --header-theme;
}

这样你就可以在许多不同的地方使用它，而不必再次重写它DRY

现在可变部分可以用这个例子来解释

:root {
  --brand-color: red;/*   default value*/
  --header-theme: {
    color: var(--brand-color);
    font-family: cursive;
    font-weight: 600;
  };
}

h1 {
  @apply --header-theme;
}


h2 {
  --brand-color: green; 
  @apply --header-theme;
}

mixin 将有一个变量发送给它并改变颜色

这不是该功能的限制，您可以使用它更多，您可以阅读更多关于SASS中的 mixin
和变量的其他使用方式，在我建议您阅读这篇博文之后

现在在我让你兴奋之后，是坏消息的时候了，它还没有在浏览器中实现chrome，它仍然值得知道它即将到来，也许如果你想准备自己从
SASS 开始