Sass 101 - A newb's guide: mixins w/arguments

mixins_w_arguments.md

Mixins can take arguments SassScript values as arguments, which are given when the mixin is included and made available within the mixin as variables.

When defining a mixin, the arguments are written as variable names separated by commas, all in parentheses after the name. Then when including the mixin, values can be passed in in the same manner.

In the following exmaple, the Mixin is included in the document with the @include directive. This takes the name of a mixin and arguments passed into it, and includes the styles defined by that mixin into the current rule.

Variable Arguments

Sometimes it makes sense for a mixin to take an unknown number of arguments. In the following example we are creating a mixin for box shadows that takes any number of shadows as arguments. In this situation, 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 ...

mixins_w_arguments.scss

SassMeister Gist

mixins_w_arguments.scss

// Example using variable names separated by commas
@mixin border($radius, $style) {
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  border-radius: $radius;
  border: $style;
}

.my-new-class {
  @include border(3px 3px 0 0, 1px solid orange);
}

.my-other-class {
  @include border(5px, 2px dotted red);
}

// Example using Variable Arguments
@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);
}