What is the use of Namespaces and Accessors in Less ?

Last Updated : 03 Mar, 2022

LESS (stands for Leaner Style Sheets) is a backward-compatible extension for CSS. LESS is a CSS pre-processor that provides you to customize, arrange, and utilize the style sheets for the webpage. Less is a dynamic style sheet language that can be executed on the client-side or server-side. Less comes with cross-browser compatibility and is an open-source language.

LESS compiler is written in JavaScript. The compiler converts LESS code into CSS when the browser loads the webpage. We can just include it in our web pages along with our LESS stylesheet.

Namespaces are provided in LESS to categorize different mixins in a single group i.e. these are used to group mixins under a common name. They are majorly used for scenarios like if we want to create different mixins with the same name for different purposes that may arouse lots of conflicts in the name so by putting them inside their own specific namespaces that confliction can be removed.

Example 1: The following is an implementation of namespaces and accessors in LESS. The HTML file will be:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Namespaces and Accessors in LESS</title> 
    <link rel="stylesheet" type="text/css" 
          href="styles.css" /> 
</head> 
  
<body> 
    <h1>Namespaces and Accessors in LESS</h1> 
    <p class="myclass">LESS provides customizable, 
        and reusable stylesheet for website.</p> 
  
</body> 
  
</html>

styles.less

.classA { 
    .classB { 
        .val(@param) { 
            font-size: @param; 
            color: blue; 
        } 
    } 
} 
  
.myclass { 
    .classA > .classB > .val(10px); 
} 

On execution of the above command; it creates the styles.css file automatically with the following code given :

CSS

.myclass { 
    font-size: 10px; 
    color: blue; 
} 

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> GFG tutorial on LESS Features</title> 
    <link rel="stylesheet" type="text/css" 
          href="styles.css" /> 
</head> 
  
<body> 
    <h1>GFG tutorial on LESS Features</h1> 
    <p class="colour-border"> 
      Example of using Namespaces in LESS .</p> 
  
</body> 
  
</html>

styles.less

.colour-border { 
    border: 1px solid #00ff00; 
    background-color: ##8fbc8f; 
    border-radius: 5px; 
    padding: 20px; 
    .rounded-box-inner { 
        border: 1px solid #00ff00; 
        .rounded-box-inner { 
            padding: 20px; 
        } 
    } 
} 

The compiled CSS file:

CSS

.colour-border { 
    border: 1px solid #00ff00; 
    background-color: #8fbc8f; 
    border-radius: 5px; 
    padding: 20px; 
} 
.colour-border .rounded-box-inner { 
    border: 1px solid #00ff00; 
} 
.colour-border .rounded-box-inner  
.rounded-box-inner { 
    padding: 20px; 
} 