有没有办法使类名与CSS自定义变量相同？

我正在寻找任何可以减少CSS冗余的解决方案：

--root {
  --brown: #775E3E;
  --headline: "Big Shoulders Display", "Oswald", "Open Sans", sans-serif;
}

.brown {color: var(--brown);}
.brown-bg {background-color: var(--brown);}

.headline {font-family: var(--headline);}

最终目标是直接在HTML中使用.headline和.brown类

<h1 class="headline brown">I AM BROWN WITH CUSTOM FONT</h1> 

这是否可以实现，而不必制作一个累人的颜色根列表，然后需要指定每个单独相同的类名

基本上我想要-headline=.headline&-brown=.brown

如果CSS中没有简单的解决方案，我愿意使用scs、SASS mixin甚至javascript。

---

提前谢谢大家

您可以为此使用SCS。我为你编了一个片段。这是自我描述的

// Arrange them in
// varName: (type, value)
$vars: (
  brown: (color, brown),
  headline: (font-family, '"Big Shoulders Display", "Oswald", "Open Sans", sans-serif')
);

// Turn all those variables to CSS Variables
:root {
  @each $var, $val in $vars {
    --#{$var}: #{nth($val, 2)};
  }
}

// Create classes out of those variables
@each $var, $val in $vars {
  .#{$var} {
    #{nth($val, 1)}: var(--#{$var});
  }

  // If type is color then generate a bg color class
  @if nth($val, 1) == color {
    .#{$var}-bg {
      background-color: var(--#{$var});
    }
  }
}

然后它会像这样生成CSS

：根{ -棕色：棕色； -标题：大肩膀显示，奥斯瓦尔德，开放式Sans，无衬线； } 布朗先生{ 颜色：棕色； } 布朗先生{ 背景颜色：棕色； } .标题{ 字体系列：var标题； }

---

这可能就是你要找的。乐于助人。

天才！比我希望的还要好