Less.js Mixins Namespaces

Last Updated : 08 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 better since CSS uses a dynamic style sheet language. LESS is flexible enough to be utilized by a wide range of browsers. Web browsers can only use CSS if it is developed and refined using a computer language called the CSS pre-processor. It is a CSS language extension as well as offering features like variables, functions, mixins, and operations to aid in creating 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 generates CSS code using the user’s preprocessor ruleset and aids in the overall simplification of CSS code. LESS is a backward-compatible addition to the CSS language. Mixins are a LESS approach for adding several CSS properties from one ruleset to another, or from one file to another.

Less.js Mixins Namespaces helps to stack up several ids or classes to mixin properties inside a more complex selector. In addition to reducing conflicts with other user or library mixins, namespacing your mixins in this way can also be used to “organize” sets of mixins.

Syntax:

.mixin() {
    .selector {
        ...
    }
}
.selector {
    .mixin.selector();
}

Compile LESS into CSS.

Example 1: The code below demonstrates the usage and implementation of the Mixins Namespaces and the use of a particular selector from multiple selectors in a complex mixin.

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 Namespaces</b></h3> 
    <div class="c1">   
        <p> 
            .mixin() 
            <br>{ 
                <br> #sel1{ 
                    <br>  padding: 20px 0px 0px 30px; 
                <br> } 
            <br>} 
        </p> 
    </div> 
</body> 
  
</html>

styles.less

CSS

@body-bg-color: #eeeeee; 
@dark: hsl(25, 71%, 8%); 
@light: rgb(253, 255, 146); 
.mixin_pad() { 
    #sel1{ 
        padding: 20px 0px 0px 30px; 
    } 
    #sel2{ 
        padding: 40px 0px 0px 40px; 
    } 
} 
body{ 
    background-color: @body-bg-color; 
} 
.c1 { 
    width: 350px; 
    height: 150px; 
    margin: 1rem; 
    background-color: @light; 
} 
p { 
    .mixin_pad#sel1(); 
    color: @dark; 
}

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

lessc styles.less styles.css

The compiled CSS file comes to be:

styles.css:

CSS

body { 
    background-color: #eeeeee; 
} 
.c1 { 
    width: 350px; 
    height: 150px; 
    margin: 1rem; 
      background-color: #fdff92; 
} 
p { 
      padding: 20px 0px 0px 30px; 
      color: hsl(25, 71%, 8%); 
}

Output:

Example 2: The code below demonstrates the usage and implementation of the Mixins Namespaces with 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 Namespaces</b></h3> 
    <div class="c1">   
        <p> 
            .mixin() 
            <br>{ 
                <br> #bg1{ 
                    <br>  background-color: if(@cond, @dark, @light) 
                <br> } 
                <br> #col1{ 
                    <br>  background-color: if(@cond, @light, @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(){ 
      #bg1{ 
          background-color: if(@cond, @dark, @light) 
      } 
      #bg2{ 
          background-color: if(@cond, @light, @dark) 
      } 
      #col1{ 
          color: if(@cond, @light, @dark) 
      } 
      #col2{ 
          color: if(@cond, @dark, @light) 
      } 
} 
body{ 
     background-color: @body-bg-color; 
} 
.c1 { 
     width: 450px; 
     height: 250px; 
     margin: 1rem; 
     .mixin#bg1(); 
} 
p { 
     padding: 40px 0px 0px 40px; 
     .mixin#col1(); 
}

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

lessc styles.less styles.css

The compiled CSS file comes to be:

styles.css:

CSS

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