Pass SASS List to Mixin with Multiple Arguments

How to pass multiple args to a Sass Mixin: a list and named variable

You must put the arbitrary arguments at the end of the mixin's arguments list (See the doc)

Try this instead: It uses named arguments in the @include arguments list and options arguments (doc) in the @mixin definition

@mixin fast-transition($ieTransition: false, $properties: "all") {
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: $properties;
  
  @if not($ieTransition) {
    :global(.browser-ie) & {
      transition: none;
    }
  }
}

to use it do this

.el-all {
  // use all for transition properties and no transition for IE
  @include fast-transition();
)
// or
.el-no-ie {
  // use $properties for transition properties and no transition for IE
  @include fast-transition($properties: 'background-color, color");
)
// or
.el-ie {
  // use $properties for transition properties and transition for IE
  @include fast-transition($properties: 'background-color, color", $ieTransition: true);
)

See this demonstration https://codepen.io/HerrSerker/pen/dyXEvWK?editors=1100

Pass sass list to mixin with multiple arguments

You can try something like this:

@mixin make_progress($val,$col){
  progress[value="#{$val}"] {
    color: #{$col};
    &::-webkit-progress-value { background-color:  #{$col}; }
    &::-moz-progress-bar { background-color: #{$col}; }
  }  
}

@mixin progress-value($value-color...) {
    @each $progress in $value-color {
      @include make_progress(nth($progress,1),nth($progress,2));
    }
}

// Calling the mixin
@include progress-value(0.25 #de2b23);
// and with a multideimensional list
@include progress-value(0.5 #FF8330, 0.75 #8A9F4A, 1 #14BB64);

This will work now if you pass the parameters as a comma separated list of space separated pairs - value/color, like I did in the above example, or in some other way make clear that your list of parameters is multidimensional - like including each passed pair in parentheses:

// with a single parameter
@include progress-value((0.25, #de2b23));
// or with multiple parameters
@include progress-value((0.5, #FF8330), (0.75, #8A9F4A), (1, #14BB64));

I also made a separate mixin make_progress, for a better overview, and in case you would want to call it in some other instance outside the loop, but you could easily leave that inside the loop.

DEMO

Passing multiple arguments in SASS Mixin to output set of classes or single class

Remove the !Default. This will work as you expect it to

Link to sassmeister

https://www.sassmeister.com/gist/2839eaf64bd441e73a92aed6bb980465

Remember all 4 classes are being compiled into your CSS file. Just use the one you want

Pass variable to sass mixin to contain multiple properties

One would typically solve this problem by using default values on a mixin and only specifying the exact values you wish to modify:

$default-hLength: -3px !default;
$default-vLength: 0 !default;
$default-blur: 0 !default;
$default-spread: null !default;
$default-colour: null !default;
$default-type: null !default;

@mixin box-shadow($hLength: $default-hLength, $vLength: $default-vLength, $blur: $default-blur, $spread: $default-spread, $colour: $default-colour, $type: $default-type){
    -webkit-box-shadow: $type $hLength $vLength $blur $spread $colour;
    -moz-box-shadow: $type $hLength $vLength $blur $spread $colour;
    box-shadow: $type $hLength $vLength $blur $spread $colour;
}

li {

   &.channel1 {
      @include box-shadow($colour: $channel1, $type: inset);
   }

   &.channel2 {
      @include box-shadow($colour: $channel2, $type: inset);
   }
}

Alternately, you can store portions of your arguments as a list and expand them when calling your mixin:

li {
    $vals1: -3px 0 0 0;
    $vals3: -3px 0 0 0 black inset;
    &.channel1 {
        // option 1
        @include box-shadow($vals1..., $colour: $channel1, $type: inset);
        // option 2
        @include box-shadow(join($vals1, ($channel1, inset))...);
        // option 3
        @include box-shadow(set-nth($vals3, 5, $channel1)...);
    }

    &.channel2 {
        // option 1
        @include box-shadow($vals1..., $colour: $channel2, $type: inset);
        // option 2
        @include box-shadow(join($vals1, ($channel2, inset))...);
        // option 3
        @include box-shadow(set-nth($vals3, 5, $channel2)...);
    }
}

---

However, you're never going to be satisfied with a mixin like that because it only assumes that you're going to have a single box-shadow, but the property allows for multiples.

It would be by far simpler for you in the long run if you could loop through the values you want and call a more robust mixin:

@mixin box-shadow($values...) {
    -webkit-box-shadow: $values;
    -moz-box-shadow: $values;
    box-shadow: $values;
}

li {
    $colours: $channel1, $channel2, $channel3, $channel4;

    @for $i from 1 through length($colours) {
        &.channel#{$i} {
            @include box-shadow(inset -3px 0 0 0 nth($colours, $i));
        }
    }
}

Pass multiple arguments to single mixin argument

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

pass a list to a mixin as a single argument with SASS

Variable Arguments

Sometimes it makes sense for a mixin to take an unknown number of arguments. For example, a mixin for creating box shadows might take any number of shadows as arguments. For these situations, Sass supports “variable arguments,” which are arguments at the end of a mixin declaration that take all leftover arguments and package them up as a list. These arguments look just like normal arguments, but are followed by .... For example:

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

via: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variable_arguments

Passing list elements as arguments to a mixin

To pass a list of parameters to a mixin that accepts multiple parameters you would want to use it like this:

@include background-image(linear-gradient($gradient...));

the three dots indicate that you want to fill in the arguments from the list elements ... otherwise the whole list is passed as a single argument ... and the linear-gradient() mixin fails (as it expects at least two color stop arguments).

DEMO

---

Related Topics