Question

我在我的应用程序中将Bootstrap 4与sass一起使用。 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}}”。

Answer 1

您可以使用@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

如何使用SASS生成类？

1 个答案: