Skip to content
Related Articles

Related Articles

What is the use of Mixins in LESS ?

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 07 Dec, 2021

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:

// Mixin in LESS

.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 elements blocks.

/*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 “.border-basic” mixins declared inside the “btn1”, “btn2”, and “btn3” classes. After compiling the above code, it will generate the following native CSS code.

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.

/*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 the following CSS code:

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:

.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 the following code:

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.

/*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:

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 to be important when called from another element.

/* 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:

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!