如何使用SASS生成类?

马特·博尔赫斯

我在应用程序中使用带有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


相关:扩展Bootstrap 4和SASS

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章