Generic @Mixin for SASS with Multiple and Varied Values

Generic @mixin for sass with multiple and varied values

From the official documentation:

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);
}

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

Can I use multiple values for one property in Sass?

Why not just @include('grid-template-rows', '2fr 1fr 1fr'); ?

Or

Include a mixin and pass parameters as an arglist. It can be done different ways depending on what you want.

  @mixin grid($template-rows:null,$template-cols:null,$template-areas:null){
    @supports (display:grid) {
      display:grid;
      $grid-rows:();
      $grid-cols:();
      $grid-areas:();

      @each $rows in $template-rows{
        $grid-rows: append($grid-rows, #{$rows}fr);
      }
      @each $cols in $template-cols{
        $grid-cols: append($grid-cols, #{$cols}fr);
      }
      @each $areas in $template-areas{
        $grid-areas: append($grid-areas, #{$areas}fr);
      }
      grid-template-rows:#{$grid-rows};
      grid-template-columns:#{$grid-cols};
      grid-template-areas:#{$grid-areas};
    }
  }

 

  html{
    @include grid(1 2 3, 4 5 6, 7 8 9 );
  }

 

        /*
          // Outputs:
          @supports (display: grid) {
            html {
              display:grid;
              grid-template-rows: 1fr 2fr 3fr;
              grid-template-columns: 4fr 5fr 6fr;
              grid-template-areas: 7fr 8fr 9fr;
            }
          }
        */

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

What do the ... mean in a SCSS mixin argument?

In this case, $color-stops is a arglist. It provides you the possibility of pass any number of arguments to a mixin and use it as you want.

For example:

@mixin linear-gradient($direction, $color-stops...){
    background-color: nth($color-stops,1);
    color: nth($color-stops,2);
}

You can call this function like that:

.foo {
  @include linear-gradient(to right, blue, white, red, black);
}

Making a Sass mixin with optional arguments

A DRY'r Way of Doing It

And, generally, a neat trick to remove the quotes.

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  -webkit-box-shadow: $top $left $blur $color #{$inset};
  -moz-box-shadow:    $top $left $blur $color #{$inset};
  box-shadow:         $top $left $blur $color #{$inset};
}

SASS Version 3+, you can use unquote():

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  -webkit-box-shadow: $top $left $blur $color unquote($inset);
  -moz-box-shadow:    $top $left $blur $color unquote($inset);
  box-shadow:         $top $left $blur $color unquote($inset);
} 

Picked this up over here: pass a list to a mixin as a single argument with SASS

---

Related Topics