In previous lesson we learned about standard mixins in Less, while today we’ll be continuing our series on mixins but keeping our focus towards parametric mixins. Parametric mixins are same like standard mixins, only difference is that parametric mixins take parameters like functions in javascript or any other programming language. After providing parameters to our mixins we get more control over our mixins and thus our mixins become dynamic in nature hence more useful and more powerful.

How parametric mixin adds dynamic nature to mixins?

Well, good question. Parametric mixin takes parameter which means we can provide a value to our mixin and that value can be changed again and again when ever we want. What it really means? Simply just keep eye on our previous lesson about mixins, you’ll realize that our code snippet was something like shown below:

.borderradius {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

Above given mixin is fine, no doubt about it. But what if we want to provide border radius of 10 in some place, while border radius of 8px at some other time? Do we will be adding a new mixin? No, not at all. Here comes parametric mixins handy we simply provide a parameter to our above mixin (that parameter may be variable) and so we can put value in place of that mixin where ever we want a change. It looks confusing but it’s not actually, have a look below:

// we are adding a parameter to our mixin ...
.borderradius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

If you look at the very first line of above code snippet you’ll realize that we are providing a variable named as @radius to our mixin (that variable is parameter). That’s the way to provide parameters to our mixins. And then we are using that variable instead of hard coded values as browser prefixes. Now if we have to provide different values as different occurrences of border radius we can simply provide that required value as parameter to our mixin. Let’e see practically:

// we are adding a border radius of 10px to our .first-class 
.first-class {
  .borderradius(10);
  // now our .first-class will take border radius of 10px
}

That’s very simple usage of our parametric mixin, let’s move on and see it’s advantage now:

// we are adding a border radius of 5px to our .second-class 
.second-class {
  .borderradius(5);
  // now our .second-class will take border radius of 5x
}

That’s the way we can provide value according to our own needs every time. Just imagine how powerful it is when it comes to our actual projects? So, parametric mixins can add huge flexibility in our overall mixin usage by providing full control to us as well.

Now let suppose in our project border radius of 10px is used 70% of all occurrences while remaining 30% contains different values, again we have a better solution for that situation as well. We’ll provide a default value to our parametric mixin of 10 and so no need to hard code that 10px value again and again. Let’s see again:

// we are adding a parameter to our mixin which takes default value of 10px...
.borderradius(@radius: 10px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

Now whenever we have to provide border radius of 10px we don’t need to provide that 10 as parameter as 10 is default value now:

// we are adding a border radius of 10px to our .first-class 
.first-class  {
  .borderradius();
  // now our .first-class  will take border radius of 10px which is default value.
}

In this way we can provide where we want different value than default value otherwise no need to provide parameter value at all. Yes, more and more flexibility is coming to our way and we are getting total control over our mixins by now. Just think for a while that when you can use your variables, string interpolation, nesting and mixins with each other how much flexibility and control you can get.