Sass Mixins and Arguments

Mixins

Mixins are a way to define styles that can be reused. The declaration block of the mixin is merged into the your main file by way of @include, and best practice is to keep them separate from styles in partials, like variables (e.g. _mixins.scss), and included after the variables partial. An example of how it would be used:

// inside the _mixins partial
@mixin alert-text {
  background-color: #f00;
  color: white;
  font-variant: small-caps;
}

// in the main scss file
.error-text {
  @include alert-text;
}

Mixins: arguments

Using variables allow for parameterization in Sass, much like a function in JS:

// inside the _mixins partial
@mixin alert-text($color) {
  background-color: $color;
  color: white;
  font-variant: small-caps;
}

// in the main scss file
.error-text {
  @include alert-text(blue);
}

The above has the same effect as the previous example, but now the background color can be chosen when it is included, which allows for much greater flexibility.

Default Argument values

Defining default values for arguments is done by using a colon and the value:

// inside the _mixins partial
@mixin alert-text($color: #f33) {
  background-color: $color;
  color: white;
  font-variant: small-caps;
}

// in the main scss file
h1 {
  @include alert-text(blue);
}
h2 {
  @include alert-text($color: green);
}
h3 {
  @include alert-text();
}

In the case above, the h3 would have the default color of #f33.
The arguments can also be passed in using the key: value syntax, as in h2 above, which will allow the arguments to be passed in any order, which is handy when there are a few different parameters with default, and only one or two need to be changed (or if you forget in what order they were defined). If this style is not used to pass in the arguments, then they must be passed in the same order as when the mixin was defined.

Null as default value

A really useful aspect of default values is defining the default as null, which results in the value being completely omitted from the compiled CSS if it is not passed in with the arguments. So, it can be thought of in this case as an optional value that is only applied if it's passed into the @include .

// inside the _mixins partial
@mixin foo($opacity: null) {
  color: #333;
  opacity: $opacity;
}

// in the main scss file
.btn {
  @include foo();
}
.other-btn {
  @include foo(0.5);
}

// compiled CSS
.btn {
  color: #333;
}
.other-btn {
  color: #333;
  opacity: 0.5;
}

Mixins: passing in a declaration block

Another neat thing that can be done with mixins is that the @content directive can be used to pass in additional values when it is included in the main scss file (almost like a callback in JS):

// inside the _mixins partial
@mixin foo($color) {
  color: $color;
  .inner {
    @content
  }
}

// in the main scss file
.btn {
  @include foo(#c69) {
    // note the curly braces
    // this is what will appear in compiled CSS where @content appears above
    color: red;
  }
}

// compiled CSS
.btn {
  color: #c69;
}

.btn .inner {
  color: red;
}