如何使用 SASS 生成类？答案

【问题标题】：How to generate classes using SASS?如何使用 SASS 生成类？
【发布时间】：2021-06-04 01:30:01
【问题描述】：

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

【问题讨论】：

标签： css sass bootstrap-4

【解决方案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://codeply.com/go/imgvc0X9l0