我在应用程序中使用带有sass的bootstrap 4。Bootstrap提供了一个自定义输入复选框,但仅适用于主要主题颜色。
我已经读过一些有关使用@each和@mixin用sass生成类的内容,但是我都不清楚。正如您在下面的代码中所看到的,我是通过手动键入每个类和颜色来做到这一点的。
.custom-checkbox-primary{
.custom-control-input:checked ~ .custom-control-label::before {
color: $primary;
border-color: $primary;
background-color: $primary;
}
}
.custom-checkbox-secondary{
.custom-control-input:checked ~ .custom-control-label::before {
color: $secondary;
border-color: $secondary;
background-color: $secondary;
}
}
.custom-checkbox-danger{
.custom-control-input:checked ~ .custom-control-label::before {
color: $danger;
border-color: $danger;
background-color: $danger;
}
}
我希望sass为我动态生成这些“ custom-checkbox-{{theme-color}}”。
您可以使用@each这样迭代主题颜色。
@each $color, $value in $theme-colors {
.custom-checkbox-#{$color}{
.custom-control-input:checked ~ .custom-control-label::before {
color: $value;
border-color: $value;
background-color: $value;
}
}
}
演示:https://www.codeply.com/go/imgvc0X9l0
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句