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