CSS PREprocessors

Mixins

by

Mixin basics

Here is how to include a simple mixin, as you can see, the syntax is rather similar between the preprocessors.

.simple-mixin() {
  foo: bar;
}

.include-mixin {
  .simple-mixin;
  baz: qux;
}
@mixin simple-mixin {
  foo: bar;
}

.include-mixin {
  @include simple-mixin;
  baz: qux;
}
=simple-mixin
  foo: bar

.include-mixin 
  +simple-mixin
  baz: qux
simple-mixin()
  foo: bar

.include-mixin 
  simple-mixin()
  baz: qux
@define-mixin simple-mixin {
  foo: bar;
}

.include-mixin {
  @mixin simple-mixin;
  baz: qux;
}
.include-mixin {
  foo: bar;
  baz: qux;
}

Mixin parameters and parameter defaults

Mixins can receive one or multiple parameters.

You can even set defaults for each of the parameters. When a parameter has a default value, you don't need to set one when calling the mixin - see how we can omit the thickness parameter.

.bordered(@color; @thickness: 1px) {
  border: @thickness solid @color;
}

.mixins-params {
  .bordered(#cbf40d);
  .bordered(#d04fbc, 3px);
}
@mixin bordered($color, $thickness: 1px) {
  border: $thickness solid $color;
}

.mixins-params {
  @include bordered(#cbf40d);
  @include bordered(#d04fbc, 3px);
}
=bordered($color, $thickness: 1px)
  border: $thickness solid $color

.mixins-params
  +bordered(#cbf40d)
  +bordered(#d04fbc, 3px)
bordered($color, $thickness = 1px)
  border: $thickness solid $color

.mixins-params
  bordered(#cbf40d)
  bordered(#d04fbc, 3px)
@define-mixin bordered $color, $thickness: 1px {
  border: $(thickness) solid $(color);
}

.mixins-params {
  @mixin bordered #cbf40d;
  @mixin bordered #d04fbc, 3px;
}
.mixins-params {
  border: 1px solid #cbf40d;
  border: 3px solid #d04fbc;
}

Named parameters

If, for whatever reason, you want to set the parameters of a mixin in a particular order that is different that the one set in the mixin, you can do that by calling the mixin and explicitly state each of the parameters you're defining.

.size(@w, @h) {
  width: @w;
  height: @h;
}

.mixins-named-params {
  .size(@h: 10px, @w: 25px);
}
@mixin size($w, $h) {
  width: $w;
  height: $h;
}

.mixins-named-params {
  @include size($h: 10px, $w: 25px);
}
=size($w, $h)
  width: $w
  height: $h

.mixins-named-params
  +size($h: 10px, $w: 25px)
size($w, $h)
  width: $w
  height: $h

.mixins-named-params
  size($h: 10px, $w: 25px)
.mixins-named-params {
  width: 25px;
  height: 10px;
}

Unknown number of parameters

If you want to have a mixin with a varying number of parameters, all CSS preprocessors allow you output all arguments like so:

.transition(...) {
  -webkit-transition: @arguments;
  -moz-transition: @arguments;
  transition: @arguments;
}

.mixins-arguments {
  .transition(opacity 200ms);
}
@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  transition: $args;
}

.mixins-arguments {
  @include transition(opacity 200ms);
}
=transition($args...)
  -webkit-transition: $args
  -moz-transition: $args
  transition: $args

.mixins-arguments
  +transition(opacity 200ms)
transition($args)
  -webkit-transition: $args
  -moz-transition: $args
  transition: $args

.mixins-arguments
  transition(opacity 200ms)
@define-mixin transition $args {
  -webkit-transition: $args;
  -moz-transition: $args;
  transition: $args;
}

.mixins-arguments {
  @mixin transition opacity 200ms;
}
.mixins-arguments {
  -webkit-transition: opacity 200ms;
  -moz-transition: opacity 200ms;
  transition: opacity 200ms;
}

Interactive

Leave a comment below or suggest improvements on GitHub.