less Mixins Introduction

Example

Mixins are similar to defining and calling functions. Say, if we need to create a repetitive style, mixins are handy. Mixins may or may not take parameters. For e.g.:

.default-round-borders {
          border-radius: 5px;
     -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.round-borders (@radius) {
          border-radius: @radius;
     -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

We have two types of declarations above. One takes in a parameter and the other doesn't. Let's see how this is being used somewhere:

@sky-blue: #87ceeb;
@dark-sky-blue: #baffff;

#header {
  background: @sky-blue;
  .default-round-borders;
}

.btn {
  background: @dark-sky-blue;
  .round-borders(3px);
}

The above code, compiled all together will give an output like this:

#header {
  background: #87ceeb;
          border-radius: 5px;
     -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.btn {
  background: #baffff;
          border-radius: 3px;
     -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}