Introduction to Mixins in Less.js

This article explains what Mixins in Less.js are.

Mixins are variables for the entire declaration block. Mixins are case sensitive. The scope of Mixins is the same as variable scope. In other words if you have make a class in CSS then you can call that class in another class. Let me explain what I mean. Please read my previous article What less.js Is if you are new to Less.js.

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;

Output



The output is the same as what we expect.

Mixins can accept parameters. Let's make a class and name it font details.

@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);}

Using the following code we can set the default value in the parameters.

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

But when setting the default value in the parameters the syntax of the calling method of the class changes.

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

Output



The output is what we expect.

@arguments will select all parameters that 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 the DivOne class.

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

Output



I hope this article is helpful for you.

Thanks :)