CODEWITHSUNDEEP
csssassmixins
daryl
daryl

Reputation: 15197

Include a SASS Mixin via another Mixin Parameter Value

I have this:

enter image description here

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}

Upvotes: 3

Views: 2705

Answers (1)

Oleg
Oleg

Reputation: 24988

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

Upvotes: 1

Related Questions