What is Mixins in LessJS

In this article we learn what is mixins in LessJS and how we implement
In this series i am going to cover following things.

Mixins are variable for the whole declaration block. Mixins are case sensitive. Mixins scope is same as variable scope. In other words if you have make a class in css then you can call that class in other class. Let me explain what I mean. Please read my previous article What is lessJS if you are new to LessJS.

Let’s create a class and name it padding. I am using my previous demo files.

.padding{ width:1000px; height: 40px; padding-top:10px; padding-left:30px;}
/*Calling padding class in Div and DivOne class*/
.Div { float:left; font-family: Georgia; font-size : 16px; background-color : @bgcolor; color: #FFF; .padding;}
.DivOne { float:left; font-family: Georgia; font-size : 20px; background-color:@bgcolor; color: #FFF; .padding;}

Output

2

Output is same as what we expect.
Mixins can except parameters. Lets make a class and name it fontdetails.

@bgcolor: red;
.padding{ width:1000px; height: 40px; padding-top:10px; padding-left:30px;}
.fontdetails(@fontsize){ font-size:@fontsize; font-family:Georgia;}
.Div { float:left; background-color : @bgcolor; color: #FFF; .padding; .fontdetails(19px);}
.DivOne { float:left; background-color:@bgcolor; color: #FFF; .padding; .fontdetails(26px);}

By using following code we can set default value in parameters.

.fontdetails(@fontsize:14px){ font-size:@fontsize; font-family:Georgia;}

But while setting default value in parameters the syntax of calling method of class is change

.Div { float:left; background-color : @bgcolor; color: #FFF; .padding;.fontdetails;}

Output

2

Output is same as what we expect.
@arguments will select all parameters which we declared. Don’t make variables named arguments.
Let me explain what I mean. Suppose I have made a class with 3 parameters and name it border and call this class in DivOne class.

.border(@size,@type,@color){border:@arguments;}
.DivOne { float:left; background-color:@bgcolor; color: #FFF; .padding;.fontdetails(26px); .border(3px,solid,black);}

Output

2

I hope this article is helpful for you.
Thanks 🙂

Tags: , , , ,