Today I will continue with next part of LESS series. In this series of LESS, you will learn about Mixins.
If you are new to the LESS series, the best starting point would be the Introduction of LESS CSS which gives basic idea about LESS and you can also read the previous article, where I have discussed about the variables.
What is a Mixin?
Mixins is a group of stylesheet which is used to reuse group of declarations into the other element of CSS.
Mixin Definition for Official site:
Mixins are a way of including (“mixing in”) a bunch of properties from one rule-set into another rule-set.
Mixin is kind of functions we are using in any programming language. Mixin also work with parameters which is known as parameterized Mixin.
First of all, lets understand the basic Mixin
Basic Mixin is just like a function without the parameters but it can not return value so you can’t say its a function but comparable to a function in programming language.
Let’s understand mixin by code:
1 2 3 4 5 6 7 8 9 10 11 | .set_box-shadow() { -webkit-box-shadow:2px 2px 3px 3px #666; -moz-box-shadow:2px 2px 3px 3px #666; box-shadow:2px 2px 3px 3px #666; } .addShadow { .set_box-shadow; } |
Here, I have used box-shadow which have three properties with the same value.In regular CSS we write all three properties everywhere in where you want in css files or class whereas using Mixins,I have declared box-shadow values in set_box-shadow and you can use that properties everywhere you want in file.
This is simple example of mixins.Next, i will show you Parametric Mixins example.
Parametric Mixins
Parametric Mixins is same like simple Mixin but with the parameters.To declare parametric Mixin, use parentheses after the mixin name and write parameters in the parenthesizes.
Let’s understand it by example:
1 2 3 4 5 6 7 8 9 10 | .set_box-shadow(@arguments:2px 2px 3px 3px #333) { -webkit-box-shadow:@arguments; -moz-box-shadow:@arguments; box-shadow:@arguments; } .addShadow { set_box-shadow(2px 2px 3px 3px #666); } |
Above, I have created a parametric Mixin for same box-shadow element.I have used @arguments parameter. Using parameter, you can set different value where you want in css. Here, I have used @argument and passed all values together, you can use multiple parameters and pass value separately.
That’s it we are done with the different types of Mixins in LESS.I just recommend that you implement this examples of LESS and i am sure you love it to use.
In the next article of LESS Series, I’ll look Nested Rules in LESS, one of the good feature in LESS.
Hope this article series helpful to you.As always, thanks for reading an article. Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.
