UX Design and Development course

Mixins

Mixins allow you to define styles that can be re-used throughout the stylesheet without needing to resort to non-semantic classes like .float-left. Mixins can also contain full CSS rules, and anything else allowed elsewhere in a Sass document.

Mixins are defined with the @mixin directive. It’s followed by the name of the mixin and optionally the arguments, and a block containing the contents of the mixin.

In the following example, the Mixin is included in the document with the @include directive.

@mixin default-box {
  border: 1px solid black;
  box-shadow: 5px 5px 5px black;
  width: 75%;
  margin: 0 auto;
}

.my-new-class {
  @include default-box;
}

SassMeister Gist

Mixins w/arguments

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 ...

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

SassMeister Gist

Mixins w/default arguments

Mixins can also specify default values for their arguments using the normal variable-setting syntax. Then when the mixin is included, if it doesn’t pass in that argument, the default value will be used instead. For example:

@mixin border($radius: 3px, $style: 1px solid red) {
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  border-radius: $radius;
  border: $style;
}

.my-new-class {
  @include border;
}

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

SassMeister Gist

Mixins w/global default arguments

You can assign to variables if they aren't already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won't be re-assigned, but if it doesn't have a value yet, it will be given one.

$border-radius: 3px !default;
$border-style: 1px solid red !default;

@mixin border($radius: $border-radius, $style: $border-style) {
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  border-radius: $radius;
  border: $style;
}

.my-new-class {
  @include border;
}

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

SassMeister Gist

Mixins w/expressions in Selectors and Property Names (interpolation)

You can use SassScript variables in selectors and property names using #{} interpolation syntax.

It’s also possible to use #{} to put SassScript into property values. In most cases this isn’t any better than using a variable, but using #{} does mean that any operations near it will be treated as plain CSS.

$class-name: over-qualified-selector;
$css-attribute: border;

@mixin test-mixin($name, $attribute) {
  p.#{$name} {
    #{$attribute}-color: blue;
  }
}

@include test-mixin($class-name, $css-attribute);