Less.js Mixins Guarded Namespaces

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. Given that CSS is a dynamic style sheet language, it is preferable. Since LESS is adaptable, it can be used by many different browsers. Only CSS that has been created and processed using a computer language known as the CSS pre-processor can be used by web browsers. In addition to providing capabilities like variables, functions, mixins, and operations to help create dynamic CSS while maintaining backward compatibility, it is a CSS language extension.

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.

Less.js Mixins Guarded Namespaces helps to stack up several id\s or classes to mixin properties inside a more complex selector and it contains a guard. So guard can also be referred to as the alternative of the if() boolean function.

If a namespace contains a guard, then the mixins defined by it will be used, only if the guard condition is true.

Syntax:

.mixin when (@guard) {
     .selector {
         ....
     }
}
.selector {
  .mixin.selector();
}

Please refer to the Compile LESS into CSS. article for the detailed installation procedure.

Example 1: The code below demonstrates the usage and implementation of the Mixins Guarded Namespaces and to use of a particular selector from multiple selectors in a complex mixin when the default is “true”.

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 Guarded Namespaces</b></h3> 
    <div class="c1"> 
        <p> 
            .mixin() when (default()) 
            <br>{ 
            <br> #bg{ 
            <br>  background-color: @dark; 
            <br> } 
            <br> #col{ 
            <br>  color: @light; 
            <br> } 
            <br>} 
        </p> 
    </div> 
</body> 
  
</html>

styles.less

CSS

@body-bg-color: #eeeeee; 
@dark: hsl(25, 71%, 8%); 
@light: rgb(253, 255, 146); 
  
.mixin() when (default()) { 
    #bg { 
        background-color: @dark; 
    } 
  
    #col { 
        color: @light; 
    } 
} 
  
body { 
    background-color: @body-bg-color; 
} 
  
.c1 { 
    width: 450px; 
    height: 250px; 
    margin: 1rem; 
    .mixin#bg(); 
} 
  
p { 
    padding: 40px 0px 0px 90px; 
    .mixin#col(); 
}

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 is as follows:

CSS

body { 
    background-color: #eeeeee; 
} 
  
.c1 { 
    width: 450px; 
    height: 250px; 
    margin: 1rem; 
    background-color: hsl(25, 71%, 8%); 
} 
  
p { 
    padding: 40px 0px 0px 90px; 
    color: #fdff92; 
}

Output:

Example 2: The code below demonstrates the usage and implementation of the Mixins Guarded Namespaces and if and boolean logical functions.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          type="text/css" 
          href="styles.css" /> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3><b>Less.js Mixins Guarded Namespaces</b></h3> 
    <div class="c1"> 
        <p> 
            .mixin() when (@cond = true) 
            <br>{ 
            <br> #bg{ 
            <br>  background-color: @light; 
            <br> } 
            <br> #col{ 
            <br>  color: @dark; 
            <br> } 
            <br>} 
        </p> 
    </div> 
</body> 
  
</html>

styles.less

CSS

@body-bg-color: #eeeeee; 
@dark: hsl(25, 71%, 8%); 
@light: rgb(253, 255, 146); 
@cond: boolean(iscolor(@dark)); 
  
.mixin() when (@cond =true) { 
    #bg { 
        background-color: @light; 
    } 
  
    #col { 
        color: @dark; 
    } 
} 
  
body { 
    background-color: @body-bg-color; 
} 
  
.c1 { 
    width: 450px; 
    height: 250px; 
    margin: 1rem; 
    .mixin#bg(); 
} 
  
p { 
    padding: 40px 0px 0px 90px; 
    .mixin#col(); 
}

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: 450px; 
    height: 250px; 
    margin: 1rem; 
    background-color: #fdff92; 
} 
  
p { 
    padding: 40px 0px 0px 90px; 
    color: hsl(25, 71%, 8%); 
}