What is the use of Mixins in LESS ?

In this article, we will know what is Mixins in LESS, along with understanding their implementation & usage through the example. A CSS preprocessor is a program that generates the CSS code by using the defined preprocessor ruleset & facilitates reducing the overall complexity of CSS code. LESS is a CSS preprocessor that is a CSS backward-compatible language extension. Mixins in LESS, are a way to include a bunch of CSS properties from one ruleset to another i.e multiple times in the same file.

For instance, consider we have multiple buttons(assuming with different button id/ class) in the webpage, each containing different color & having similar font-size and padding properties. Now, if we need to write similar CSS properties for these buttons, then we have to repeat the block of code multiple times, for each button, & hence code size becomes lengthy. Mixin in LESS can be useful to reduce & discard the repetitive properties used in the code. Using LESS, we can define all those repetitive properties inside one mixin with the name, say, “button_basic” and define all those repetitive properties inside it.

Syntax:

.button_basic{
    font-size: 1em;
    padding: 1em;
    font-family: 'Times New Roman', Times, serif;
}

Example: In this example, we have used the above mixin just by calling it like a function inside the other element’s blocks.

one.less

Javascript

/*LESS file */

.button_basic{
    font-size: 1em;
    padding: 1em;
    font-family: 'Times New Roman', Times, serif;
}
.btn1{
    .button_basic();
    background-color: rgb(235, 141, 141);
}
.btn2{
    .button_basic();
    background-color: rgb(94, 94, 230);
}
.btn3{
    .button_basic();
    background-color: violet;
}

From the above code example, we have called the “.button-basic” mixins declared inside the “btn1”, “btn2”, and “btn3” classes.

To compile the less file to a CSS file, write the following command.

lessc one.less two.css

Execute the above command, it will create the “two.css” file automatically with the following code. 

two.css

CSS

.button_basic {
  font-size: 1em;
  padding: 1em;
  font-family: "Times New Roman", Times, serif;
}
.btn1 {
  font-size: 1em;
  padding: 1em;
  font-family: "Times New Roman", Times, serif;
  background-color: #eb8d8d;
}
.btn2 {
  font-size: 1em;
  padding: 1em;
  font-family: "Times New Roman", Times, serif;
  background-color: #5e5ee6;
}
.btn3 {
  font-size: 1em;
  padding: 1em;
  font-family: "Times New Roman", Times, serif;
  background-color: violet;
}

This is the basic usage of mixins in Less. Now, let’s understand some other concepts that can be applicable to mixins.

Parametric Mixins: We can pass arguments in mixins by defining the arguments at the top of the mixins.

Syntax:

.button_basic(@background_color){
    font-size: 1em;
    padding: 1em;
    font-family: 'Times New Roman', Times, serif;
    background-color: @background_color;
}

Example: Here, we can call the above mixin, just like other mixins, and at the time of calling we pass the values to the mixins arguments.

style.less

Javascript

/*Less Code file*/

.button_basic(@background_color){
    font-size: 1em;
    padding: 1em;
    font-family: 'Times New Roman', Times, serif;
    background-color: @background_color;
}
.btn1{
    .button_basic(rgb(235, 141, 141));

}
.btn2{
    .button_basic(rgb(94, 94, 230));

}
.btn3{
    .button_basic( violet);

}

When the above LESS code is compiled  then it results in the following CSS code:

To compile the less file to a CSS file, write the following command.

lessc style.less style.css

Execute the above command, it will create the “style.css” file automatically with the following code. 

style.css

CSS

.btn1 {
  font-size: 1em;
  padding: 1em;
  font-family: "Times New Roman", Times, serif;
  background-color: #eb8d8d;
}
.btn2 {
  font-size: 1em;
  padding: 1em;
  font-family: "Times New Roman", Times, serif;
  background-color: #5e5ee6;
}
.btn3 {
  font-size: 1em;
  padding: 1em;
  font-family: "Times New Roman", Times, serif;
  background-color: violet;
}

We can also give default values to parametric mixins, as shown below:

default.less

Javascript

.button_basic(@background_color:red){
   font-size: 1em;
   padding: 1em;
   font-family: 'Times New Roman', Times, serif;
   background-color: @background_color;
}
.button1{
   .button_basic();
}

When the above code is compiled to CSS, it results in the following code:

To compile the less file to a CSS file, write the following command.

lessc default.less default.css

Execute the above command, it will create the “default.css” file automatically with the following code. 

default.css

CSS

.button1 {
  font-size: 1em;
  padding: 1em;
  font-family: 'Times New Roman', Times, serif;
  background-color: red;
}

On calling the above mixins, if we don’t pass any value at the time of call, the default value of the argument will be used in those cases.

Selectors in Mixins: We can also use selectors with mixins. Here is an example is given below:

Syntax:

.button_basic(){
   &:hover{
      background-color: white;
  }
}

Example: In the above example, the hover selector is used inside the mixins and can be called from other elements.

style1.less

Javascript

/*LESS Code file */

.button_basic()
{
  &:hover
  {
      background-color: white;
  }
}
.btn1
{
    .button_basic();
}

When the above code is compiled to CSS, it results in the following code:

To compile the less file to a CSS file, write the following command.

lessc style1.less style1.css

Execute the above command, it will create the “style1.css” file automatically with the following code. 

style1.css

CSS

.btn1:hover {
  background-color: white;
}

!important Keyword: We can use !important keyword beside a mixin to make an entire mixin to be “important”.

Example: Here is an example, where we have made the mixin important when called from another element.

imp. less

Javascript

/* Less Code */
.button_basic(){
    font-size: 1em;
    padding: 1em;
    font-family: 'Times New Roman', Times, serif;
  }

.btn2{
    .button_basic() !important;

}

When the above code is compiled to CSS, it results the following code:

To compile the less file to a CSS file, write the following command.

lessc imp.less imp.css

Execute the above command, it will create the “imp.css” file automatically with the following code. 

imp.css

CSS

/*CSS code */

.btn2
{
  font-size: 1em !important;
  padding: 1em !important;
  font-family: 'Times New Roman', Times, serif !important;
}

Thus, we have discussed the use of Mixins and also many features of mixins in LESS. The mixin feature in LESS is one of the very useful features when writing long CSS code where many items are to be repeated. It not only saves the line of code but also reduces the complexity of the code.

Reference: https://lesscss.org/features/#mixins-feature