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

Question

我正在寻找任何可以减少这种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混合甚至javascript。 提前谢谢大家！

Answer 1

您可以使用 SCSS 来实现此目的。我为你构建了一个片段。这是自我描述的。

// 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);
}

这可能就是您要找的。快乐的帮助。