9.5 Sass mixins

When you find yourself writing the same code over and over again, it feels like Sass mixins might help you out.

Sass mixins are CSS functions that you can include whenever you want.

Syntax

Remember how we wrote @keyframes when creating CSS animations? The Sass mixin syntax is fairly similar:

@mixin overlay() {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

The name of this mixin is overlay. You can reference this mixin in any CSS rule by using @include:

.modal-background{
  @include overlay();
  background: black;
  opacity: 0.9;
}

As usual, this .scss will be compiled into .css:

.modal-background{
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  background: black;
  opacity: 0.9;
}

Reusability

The main purpose of a mixin is to make a set of properties reusable.

Like Sass variables (where you define your values on a single location), Sass mixins allow you to define properties on a single location.

The previous mixin can be reused in other rules:

.modal-background{
  @include overlay();
}

.product-link{
  @include overlay();
}

.image-pattern{
  @include overlay();
}

.modal-background{
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.product-link{
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.image-pattern{
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

Parameters

Because mixins are functions and because you might want to alter the output, mixins can accept parameters.

For example, this border-radius mixin prevents rewriting vendor prefixes and takes the actual radius value as a parameter:

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

.box{
  @include border-radius(3px);
}

.box{
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
      -ms-border-radius: 3px;
          border-radius: 3px;
}

The mixin circumvents the hassle of having to write all vendor prefixes, and uses the $radius to allow defining the same radius value for every vendor property.

Optional parameters

If you want a parameter to have a default value while providing the possibility to set one occasionally, you can create optional paramaters:

@mixin label($text: "Code", $background: $yellow, $color: rgba(black, 0.5)) {
  position: relative;
  &:before{
    background: $background;
    color: $color;
    content: $text;
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    height: 1rem;
    left: 0;
    letter-spacing: 0.1em;
    line-height: 1rem;
    padding: 0 0.5em;
    position: absolute;
    text-transform: uppercase;
    top: 0;
  }
}

This mixin is the one used by this website to add labels in the top left corner of code snippets. It has 3 optional parameters, each of them with their own default value set with a colon :.

This mixin is used several times throughout the code:

div.highlighter-rouge{
  @include label();
  &.css{
    @include label("CSS", $blue, white);
  }
  &.scss{
    @include label("SCSS", #c69, white);
  }
}

The div.highlighter-rouge will use the mixin’s default values:

• text "Code"
• background: $yellow
• color: rgba(black, 0.5)

The .css and .scss versions, because their parameters are set, will use different labels and colors.

Mixin libraries

If you don’t want to spend time writing your own Sass mixins, you can use any of the following mixin libraries:

• Bourbon: bourbon.io
• Compass: compass-style.org
• Susy: susy.oddbird.net