Css 在@each中使用变量值
我想在@each:中使用一个变量值为不同的状态创建类。 但是SASS不使用value,而是放在变量名中 具有以下SASS语法:Css 在@each中使用变量值,css,sass,scss-mixins,Css,Sass,Scss Mixins,我想在@each:中使用一个变量值为不同的状态创建类。 但是SASS不使用value,而是放在变量名中 具有以下SASS语法: $success: green; $warning: yellow; $danger: red; $information: steelblue; @mixin theme ($color) { &:checked { background: $color; } @each $theme in success, warning, danger
$success: green;
$warning: yellow;
$danger: red;
$information: steelblue;
@mixin theme ($color) {
&:checked {
background: $color;
}
@each $theme in success, warning, danger, information {
.checkbox--#{$theme} {
@include theme($theme);
}
}
而不是使用$warning值,mixin将创建
color: warning
如何修复它?SCS中没有动态变量名,但您可以使用: 为了完整性起见,如果您使用的是不支持SCS的非常旧的版本,那么可以使用嵌套和函数
...
$themes: (
(success $success),
(warning $warning),
(danger $danger),
(information $information)
);
@each $pair in $themes {
$theme: nth($pair, 1);
$color: nth($pair, 2);
.checkbox-#{$theme} {
@include theme($color);
}
}
两者将产生相同的输出:
.checkbox-success:checked {
background: green;
}
.checkbox-warning:checked {
background: yellow;
}
.checkbox-danger:checked {
background: red;
}
.checkbox-information:checked {
background: steelblue;
}
.checkbox-success:checked {
background: green;
}
.checkbox-warning:checked {
background: yellow;
}
.checkbox-danger:checked {
background: red;
}
.checkbox-information:checked {
background: steelblue;
}