Question

I have this:

As you can see I currently have a conditional to include the button style mixins, is there anyway I can automagically include one? For example:

@mixin button($color)
  @include button-#{$color}

Answer 1

Seeing your markup above, I’m assuming you’ve tried interpolation already and it din’t work. Just a thought – wouldn’t an extend be more appropriate in this context? i.e. extend individual button-* mixins with a certain roundedness.

That being said, you already have the button $color parametrized, but you are taking a step back by adding an extra level of complexity of having a pre-defined mixin included depending on the variable value! I’m assuming that you’ve started with button-blue…button-tree mixins, and then a requirement came up needing a $circle toggle?

If you are, in fact, using button-blue…button-tree outside of the button mixin, I’d say it would be most maintainable to have the “multiple ifs” switch logic abstracted once to a function directive like

@function include-button-mixin($color) {
  @if $color == blue
    @include button-blue
  ...
}