我正在寻找可以减少这种 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。 提前谢谢大家!
最佳答案
您可以为此使用 SCSS。我为你构建了一个片段。它是 self 描述的。
// 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);
}
这可能就是您要找的。乐于助人。
关于css - 有什么方法可以使类名与 CSS 自定义变量相同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59081381/