How to use Mixins in LESS CSS?

Many times when we work with style sheets we have to repeat CSS rules throughout the document:

header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background: #333;
  width: 100%;
  margin: 0;
  height: auto;
}
footer {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background: #333;
  width: 100%;
  margin: 0;
  height: auto;
}
section {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

This becomes a real headache when the Style Sheet grows or if we decide to change some CSS rules; since we would have to review the entire Style Sheet and make said change, such as if we decided to no longer use rounded edges or change the measurements of said property.

LESS CSS Mixins

With LESS CSS Mixins we can embed all the properties of a class in another class by simply including the class name as one of its properties; It works in a very similar way to variables but with entire classes; If we wanted to generate the rules above, we could do something like this:

.esquinas-redondeadas () {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

.clase-x () {
  background: #333;
  width:100%;
  margin:0;
  height: auto;
}

header {
  .esquinas-redondeadas;
  .clase-x
}
footer {
  .esquinas-redondeadas;
  .clase-x
}
section{
   .esquinas-redondeadas;
}

This is one of the most interesting properties that LESS CSS offers us since it allows the content of these classes to be inherited from other classes and thus avoids the repetition of CSS rules and organizing the Style Sheet.

LESS CSS Mixins with parameter passing

Now for our small example, what happens if we want the measurements of the edges of the header to be different from those of the footer?

We can do something like this:

.esquinas-redondeadas (@radio:5px) {
  -webkit-border-radius: @radio;
  -moz-border-radius: @radio;
  -ms-border-radius: @radio;
  -o-border-radius: @radio;
  border-radius: @radio;
}

.clase-x () {
  background: #333;
  width:100%;
  margin:0;
  height: auto;
}

header {
  .esquinas-redondeadas(10px);
  .clase-x
}
footer {
  .esquinas-redondeadas;
  .clase-x
}
section{
   .esquinas-redondeadas;
}

By compiling the previous LESS code we will obtain:

header {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  background: #333;
  width: 100%;
  margin: 0;
  height: auto;
}
footer {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background: #333;
  width: 100%;
  margin: 0;
  height: auto;
}
section {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

As we saw in this last example, Mixins in LESS CSS can also behave like functions, and take arguments which allows their operation to be enhanced.