Less.js Mixins Guarded Namespaces
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%);} |
Output:
Reference: https://lesscss.org/features/#mixins-feature-guarded-namespaces
Please Login to comment...