Pass multiple arguments to single mixin argument

Question

I know it's possible to pass multiple arguments into a mixin function. Like so:

@mixin exampleOne($font-family, $primary-color){
  .address {
    font-family: $font-family;
    color: $primary-color;
  }
}

However, I would like to achieve something like this

@mixin exampleTwo($font-family, $primary-color...){
  .address {
    font-family: $font-family;
    color: $primary-color;
  }
}

So it would compiled:

@include exampleTwo('Avenir', Red, font-weight: 600, text-transform: upperscase)

To:

.address {
  font-family: 'Avenir';
  color: red;
  font-weight: 600;
  text-transform: uppercase;
}

I guess my question is, "Is it possible to pass extra arguments to a mixin, when that mixin has not yet defined those arguments. Just for extendibility. I don't think it's possible to pass an actual "Object" to a mixin argument. If you can that would answer my question."

Hope this makes sense. Thanks in advance!

Answer 1

The best thing to do in this case would be to use a map to hold the property/value pairs, like:

(font-weight: 600, text-transform: uppercase)

Then you could add a parameter to hold the map in the mixin:

@mixin fonts($font-family, $primary-color, $styles){

And loop through, the map, inserting the styles into the rule:

@each $property, $value in $styles {
  #{$property}: $value;
}

To put it all together:

@mixin fonts($font-family, $primary-color, $styles){
  .address {
    font-family: $font-family;
    color: $primary-color;

    //Loop through styles map
    @each $property, $value in $styles {
      #{$property}: $value;
    }
  }
}

And you'd call it like:

@include exampleTwo('Avenir', Red, (font-weight: 600, text-transform: uppercase));

Which would output:

.address {
  font-family: "Avenir";
  color: Red;
  font-weight: 600;
  text-transform: uppercase;
}

SassMeister Demo