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

【问题标题】：Is there any way to make class names the same as the CSS custom variable?有没有办法使类名与 CSS 自定义变量相同？
【发布时间】：2020-03-23 16:04:11
【问题描述】：

我正在寻找任何可以减少这种 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>

这是否可以实现，而不必制作一个令人筋疲力尽的:root 颜色列表，然后需要单独指定每个类名（这将是相同的）？

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

如果 CSS 中没有简单的解决方案，我愿意使用 SCSS、SASS mixin 甚至 javascript。提前谢谢大家！

【问题讨论】：

标签： css global-variables mixins css-variables scss-mixins

【解决方案1】：

您可以为此使用 SCSS。我为你建立了一个sn-p。它是自我描述的。

// 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

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

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

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

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

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

【讨论】：

天才！效果比我希望的还要好