Css 如何使用SASS生成类？

我在我的应用程序中使用了带sass的bootstrap 4。引导提供了一个自定义的输入复选框，但仅用于主主题颜色

我读过一些关于使用@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为我动态生成这些“自定义复选框-{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;
      }
  }
}

演示：

---

相关的：