使用@each
圈.不要在:root
中创建vars
,而是在单个var
中添加这些(参见下面的示例)
$colors : (
"primary-50": "1,1,1",
"primary-100": "2,2,2",
"primary-200": "3,3,3",
);
@each $color, $value in $colors {
.bg-#{$color} {
background-color: rgb($value);
}
}
以上代码编译成
.bg-primary-50 {
background-color: #010101;
}
.bg-primary-100 {
background-color: #020202;
}
.bg-primary-200 {
background-color: #030303;
}
还有CSS --variables
:root {
@each $color, $value in $colors {
--color-#{$color}: rgb($value);
}
}
和???? 你有CSS变量
:root {
--color-primary-50: #010101;
--color-primary-100: #020202;
--color-primary-200: #030303;
}
就像你在 comments 中提到的"这个解决方案适用于明暗模式吗?"为此,你可以这样做
html[data-color-mode="dark"] {
$dark-mode-colors: (
"primary-color-50": "0, 0, 0",
"primary-color-100": "1, 1, 1",
"primary-color-200": "2, 2, 2",
)
@each $color, $value in $colors {
.bg-#{$color} {
background-color: $value;
}
}
}
// change your color scheme as you prefer method will remain the same
html[data-color-mode="light"] {
$light-mode-colors: (
"primary-color-50": "0, 0, 0",
"primary-color-100": "1, 1, 1",
"primary-color-200": "2, 2, 2",
)
@each $color, $value in $colors {
.bg-#{$color} {
background-color: $value;
}
}
}