Use of loops with mixins

Hi, I have a quick question about Sass.
For the past few days I have been wondering about my use of mixins and loops on a map.
Here is a map for example:

$colors = ('alert': rgb(255, 0, 0), 'success': rgb(0, 255, 0), 'primary': rgb(0, 0, 255));

My question arises on the creation of my different classes.
Do you think it would be better to do it all in a mixins:

@mixin btn-mods($colors-mod){
  @each $mod, $color in $colors-mod{
    &--#{$mod}{
      background-color: $color;
    }
  }
}

.btn{
  @include btn-mods($colors);
}

or loop directly in my btn class

.btn{
    @each $mod, $color in $colors{
      &--#{$mod}{
        background-color: $color;
      }
    }
}

The result is the same but I wonder which method is the most relevant :face_with_raised_eyebrow:

Hi,
I would recommend to be as generic as possible. Then you can reuse your code in different projects. Color classes have a high potential of being reused, therefore I would do it as you did it in your first example. If you have something very project specific, I would do it as you did in your second example as it saves code not to produce a lot of generic classes that aren’t really in use…

Thanks a lot for your answer. This confirms the first intuitions I had :slight_smile:
Thanks again.

1 Like