Less.js Mixins

Last Updated : 06 Feb, 2023

In this article, we will see the 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.

Mixins With Parentheses: Parentheses mixin is used to hide the mixin, which means If you want to create a mixin but you do not want that mixin to be in your CSS output, put parentheses after the mixin definition.

Syntax:

.bordered-box{
 background: lightgreen;
}
.class {
 .bordered-box();
}

Selectors in Mixins: The mixins can contain not just properties, but they can contain selectors also. We can also use selectors with mixins. Here is an example given below:

Syntax:

.bordered_box(){
   &:hover{
      background-color: black;
  }
}
div {
    .bordered_box();
}

Namespaces: Namespaces are used to group the mixins under a common name.

Syntax:

#hello() {
   background:black;
   .inner {
      color: blue;
   }
}

C {
   #hello > .inner;
}

Guarded Namespaces: When the guard is applied to the namespace, mixins defined by it are used only when the guard condition returns true.

Syntax:

#namespace when (@color = black) {
  .mixin() {  }
}

#namespace {
  .mixin() when (@color = black) {  }
}

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

Syntax:

.bordered-box(@width: 2;@color: red){
    border:@width solid blue;
   
}

#one-image{
    .bordered-box() !important;
}

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

Syntax:

.bordered-box(@width){
    border:@width solid blue;
    padding: @width * 4;
}

Pattern-matching: You can change the behavior of mixin by passing parameters to it.

Syntax:

.mixin(dark; @color) {
   color: darken(@color, 15%);
}

.mixin(light; @color) {
   color: lighten(@color, 15%);
}

@color-new: dark;

.line {
   .mixin(@color-new; #FF0000);
}

Using Mixins as Functions: Mixins consist of variables; these can be used in the caller’s scope and are visible. Mixins are similar to functions and the variables that are defined in a mixin will behave as the return values. Whenever a mixin is defined inside another mixin, it can be used as a return value too.

Syntax:

.average(@a, @b) {
  @result: ((@a + @b) / 2);
}

div {
    padding: .average(3px, 5px)[@result];
}

Recursive Mixins: Recursive mixin is used for repetitively calling the same function until the loop reaches the desired value during the program execution by using the divide and conquer logic.

Syntax:

.while(@a) when (@a >0 ) and (@a < 11){
    .while((@a  - 1));   
    width: (1px * @a); 
  }
  
  Hello GeeksforGeeks {
    .while(10); 
  }

Mixin Guards: If you want to match simple values or the number of arguments on expressions, then you can make use of guards.

Syntax:

.mixin(@a) when (lightness(@a) >= 50%) {
  background-color: blue;
}
.mixin(@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin(@a) {
  color: @a;
}

Aliasing Mixins: Assigning mixin calls to a variable. Mixins can be assigned to a variable to be called a variable call or can be used for map lookup.

Syntax:

#school() {
  .colors() {
    background: blue;
  }
}
.box {
  @alias: #school.colors();
  @alias();
}

Example 1: This example describes the basic usage of the LESS.js Mixins. Here, we can call the below mixin, just like other mixins, and at the time of calling we pass the values to the mixins arguments.

para.less

.bordered-box(@width) { 
    border:@width solid blue; 
    padding: @width * 4; 
    color:green; 
} 
  
.para { 
    .bordered-box(12px); 
}

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

para.css

.para { 
    border: 12px solid blue; 
    padding: 48px; 
    color: green; 
}

index.html

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          href="para.css" 
          type="text/css" /> 
    <title>LESS Mixins</title> 
</head> 
  
<body> 
    <div class="para"> 
        <h1>GeeksForGeeks</h1> 
        <h2>We are learning mixin in less</h2> 
    </div> 
</body> 
  
</html>

Output: When you run the HTML code then you will get the output which is shown like this:

Example 2: This is another example that demonstrates the use of mixins in the LESS.js.

hello.less

.hello { 
    color:blue; 
} 
   
.h22 { 
    background : #64d9c0; 
    .hello(); 
} 
   
.h3 { 
    background :red; 
    .hello; 
}

To compile the less code to CSS code write the following command:

lessc hello.less hello.css

The following Compiled CSS code will be generated:

hello.css

.hello { 
    color: blue; 
} 
.h22 { 
    background: #64d9c0; 
    color: blue; 
} 
.h3 { 
    background: red; 
    color: blue; 
}

index.html

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href="hello.css" type="text/css" /> 
    <title>LESS Mixins</title> 
</head> 
  
<body> 
    <h1 class="hello">GeeksForGeeks</h1> 
    <h2 class="h22">We are learning mixin in less</h2> 
    <h3 class="h3"> 
        LESS is a dynamic style sheet language  
        that extends the capability of CSS. 
    </h3> 
</body> 
  
</html>