Today we’ll be exploring another very important and powerful feature of Less, mixins. Mixins at very basic level provides us the functionality to mix the values of one class in to another class without any special syntax, which makes it really handy and time saving, avoiding duplication and making our css files more organized. Let’s move on …

As we already discussed that css is really repetitive in it’s nature and so in no time our css files gets bigger in size which are difficult to handle (modify). With the help of mixins we can decrease our file sizes to a great extent. Mixins are applied in same way as variables in Less, but only change is in syntax.

In Variables we just store one value and that variable can be used again and again, while what about storing multiple same values? Here comes mixins, Mixins are used to store multiple same values and then that class(MIXIN) can be used again and again.

How we use mixins in Less:
In Less we simply create a class as we do in regular css, and then in that class we store our same multiple values. Then that class can be used any where in the code to achieve required functionality. Let suppose in our application we are using a font-size of 14px and font-weight as normal and also font-style normal as well, it may look like shown below in our mixin:

//creating mixin and storing our values in mixin
.samefont {
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
}

So, our mixin class is now ready to be used where ever we want. Let suppose we have to provide above mentioned font styles to p selector, we’ll be using mixin like shown below:

//using our mixin class to style p selector 
p {
  .samefont;
}

In above code snippet our p selector will be taking font-size of 14px, font-weight and font-style normal. Just imagine how much time and space we can save in our development with the help of mixins and variables. Not convinced yet? Ok, no problem, let suppose we have to provide same mentioned styles to our a selector. Yes, you got it and I am sure now you’ll realize that how much time and efforts can be saved. Let’s see practically once again:

//setting font-size of 14px, font-weight and font-style normal.
a {
  .samefont;
}

We jsut used the same mixin class and saved a couple of lines and it looks too comfortable to use as well. Now as you realized the importance of mixins one thing more adds to it. That’s how to use mixins effectively to get more out of it. To get more out of mixins simply chose your related code snippets and use mixins in place then use that mixin class again and again to really save time, and duplication.

Some suggestions to use mixins:
Mixins should must be used to provide browser prefixes because browser prefixes are must to provide so using mixin we can get rid of such huge duplication. Am I right? Let’s see what I mean? Suppose we have to provide border radius and you know some browsers handle border radius property differently and so we provide prefixes in such case. To do so we can create a mixin and that mixin can be used to save time.

//creating mixin and storing values
.borderradius {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

Now we can use that border radius again and again where ever we want, see usage below:

//using our mixin to provide 5px border radius
.fancy-img {
  .borderradius
}

That’s it, very simple to use mixins. Simple we create a class and that class can be used inside other classes. Now it’s up to you that how much you practice with mixins to get more and more out of mixins. While I’ll be suggesting to use mixins as much as you can because mixins are so cool to use and save time and avoiding duplication in your css.