Post
Ask Question

Introduction to Mixins in Less.js

Introduction

 
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 a variable scope. In other words, if you have to 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.
  1. .padding{ width:1000px; height: 40px; padding-top:10px; padding-left:30px;}    
  2. /* Calling padding class in Div and DivOne class */    
  3. .Div { float:left; font-family: Georgia; font-size : 16px; background-color : @bgcolor; color: #FFF; .padding;}    
  4. .DivOne { float:left; font-family: Georgia; font-size : 20px; background-color:@bgcolor; color: #FFF;    
Output
 
Output
 
The output is the same as what we expect.
 
Mixins can accept parameters. Let's make a class and name it font details.
  1. @bgcolor: red;    
  2. .padding{ width:1000px; height: 40px; padding-top:10px; padding-left:30px;}    
  3. .fontdetails(@fontsize){ font-size:@fontsize; font-family:Georgia;}    
  4. .Div { float:left; background-color : @bgcolor; color: #FFF; .padding; .fontdetails(19px);}    
  5. .DivOne { float:left; background-color:@bgcolor; color: #FFF; .padding; .fontdetails(26px);}   
Using the following code we can set the default value in the parameters.
  1. .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.
  1. .Div { float:left; background-color : @bgcolor; color: #FFF; .padding;.fontdetails;}   
Output
 
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 a border and call this class in the DivOne class.
  1. .border(@size,@type,@color){border:@arguments;}    
  2. .DivOne { float:left; background-color:@bgcolor; color: #FFF; .padding;.fontdetails(26px); .border(3px,solid,black);}   
Output
 
Output
 
I hope this article is helpful to you.
 
Thanks :)


Similar Articles