Mixin – Less

Demo

Summary

Less extend example:

.custom-colors {
  background-color: green;
  color: yellow;
}

h1 {
  .custom-colors();
}

p {
  .custom-colors();
}

Compiled CSS:

p, h1 {
  background-color: green;
  color: yellow;
}

To see a live example of this code, view the Demo section below.

Details

Mixins in Less allow you to group several CSS declarations together and reuse them in multiple rules. In Less, you can use any class as a mixin.

The mixin feature uses the following format:

.mixin-selector-name {
  property 1: value 1;
  property 2: value 2;
  // property 3...
}

.rule-1 {
  .mixin-selector-name();
}

.rule-2 {
  .mixin-selector-name();
}

Exercises

First, recreate the Less code in the embedded CodePen demo.

Then try changing the values in the mixin.

Back to: Less Reference