How to generate classes using SASS?

Question

I'm using bootstrap 4 with sass in my application. Bootstrap provides a custom input checkbox but only for the primary theme color.

I've read some things about generating classes with sass using @each and @mixin, but none of them were clear to me. As you can se in the code bellow i did it by hand typing every class and color.

.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;
  }
}

I want sass to generate these 'custom-checkbox-{{theme-color}}' dynamically for me.

Answer 1

You can use @each to iterate the theme-colors like this..

@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;
      }
  }
}

Demo: https://codeply.com/go/imgvc0X9l0

---

Related: Extending Bootstrap 4 and SASS