Less.js Mixins Pattern-matching

Last Updated : 03 Nov, 2022

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is preferable since CSS is a dynamic style sheet language. LESS can be utilized by many different browsers because it is versatile. Web browsers can only use CSS that has been developed and processed using a computer language known as the CSS pre-processor. It is a CSS language extension that also offers features like variables, functions, mixins, and operations to aid in the creation of dynamic CSS while keeping backward compatibility.

Mixins in less: Mixins in LESS, along with understanding their implementation and usage through the example. A CSS preprocessor is a tool that helps to simplify CSS code by generating CSS code based on the user’s preprocessor ruleset. LESS is a CSS language extension that is backward-compatible. Mixins are a LESS method for combining many CSS properties from one ruleset or file to another.

Mixins Pattern-matching is a way to implement different behaviors of mixins depending on the parameters we pass while calling the mixins.

Syntax:

.mixin(@param1, @param2) {
   ....
}
.class {
   .mixin(value1, value2);
}

Please refer to the Compile LESS into CSS. article for a detailed description.

Example 1: The code below demonstrates the usage and implementation of the Mixins Pattern-matching and we can see how the input can make the mixin behave differently.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          type="text/css" 
          href="styles.css" /> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3>Less.js Mixins Pattern-matching</h3> 
    <div class="c1"> 
        <p> 
            .mixin(proper, @color) 
            <br>{ 
            <br> font-style: oblique; 
            <br> color: lighten(@color, 10%); 
            <br>} 
        </p> 
    </div> 
</body> 
  
</html>

styles.less

CSS

@body-bg-color: #eeeeee; 
@dark: hsl(25, 71%, 8%); 
@light: rgb(253, 255, 146); 
@var: prop; 
  
.mixin(prop, @color) { 
    color: darken(@color, 10%); 
} 
  
.mixin(proper, @color) { 
    color: lighten(@color, 10%); 
} 
  
.mixin(@_, @color) { 
    font-style: oblique; 
} 
  
body { 
    background-color: @body-bg-color; 
} 
  
.c1 { 
    width: 400px; 
    height: 200px; 
    margin: 1rem; 
    background-color: @light; 
} 
  
p { 
    padding: 50px 0px 0px 70px; 
    .mixin(@var, @dark); 
}

Now, to compile the above LESS code to CSS code, run the following command:

lessc styles.less styles.css

styles.css: The compiled CSS file comes to be:

CSS

body { 
    background-color: #eeeeee; 
} 
  
.c1 { 
    width: 400px; 
    height: 200px; 
    margin: 1rem; 
    background-color: #fdff92; 
} 
  
p { 
    padding: 50px 0px 0px 70px; 
    color: hsl(0, 0%, 0%); 
    font-style: oblique; 
}

Output:

Example 2: The code below demonstrates the usage and implementation of the Mixins Pattern-matching and CSS guards are added to the mixin.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          type="text/css" 
          href="style.css" /> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3><b>Less.js Mixins Pattern-matching</b></h3> 
    <div class="c1"> 
        <p> 
            .mixin(@p, @color) when (default()) 
            <br>{ 
            <br> font-style: @p; 
            <br> color: @color; 
            <br>} 
        </p> 
    </div> 
</body> 
  
</html>

styles.less

CSS

@body-bg-color: #eeeeee; 
@dark: hsl(25, 71%, 8%); 
@light: rgb(253, 255, 146); 
@param: italic; 
  
.mixin(@p, @color) when (default()) { 
    font-style: @p; 
    color: @color; 
} 
  
body { 
    background-color: @body-bg-color; 
} 
  
.c1 { 
    width: 400px; 
    height: 200px; 
    margin: 1rem; 
    background-color: @dark; 
} 
  
p { 
    padding: 50px 0px 0px 80px; 
    .mixin(@param, @light); 
}

Now, to compile the above LESS code to CSS code, run the following command:

lessc styles.less styles.css

styles.css: The compiled CSS file comes to be:

CSS

body { 
    background-color: #eeeeee; 
} 
  
.c1 { 
    width: 400px; 
    height: 200px; 
    margin: 1rem; 
    background-color: hsl(25, 71%, 8%); 
} 
  
p { 
    padding: 50px 0px 0px 80px; 
    font-style: italic; 
    color: #fdff92; 
}