Less.js @import At-Rules once

Last Updated : 27 Sep, 2022

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. This dynamic style sheet language gives CSS more functionality. LESS provides interoperability across browsers. A programming language called CSS pre-processor is used to enhance and compile CSS so that web browsers may use it. It is also a CSS language extension that provides features like variables, functions, mixins, and operations that let us create dynamic CSS while yet keeping backward compatibility.

Less.js@import At-Rules once is the default behavior that is used to ensure that files with identical names are imported only once. The imported code will be added to the CSS compiled code by extracting the code. This gives the code in the files imported as the output. The subsequent import statements will be ignored if the file is imported for the first time only.

Syntax:

@import (once) "value";

Parameter value:

value: This is the compulsory parameter for @import (once), this generally contains a file path or a filename that directs to the main file.

Please refer to the Less.js Installation article for a detailed description.

Example 1: The below code example demonstrates the usage and implementation of the @import (once). Here we import multiple LESS files with identical names and they are compiled only once.

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 @import At-Rules once</h3> 
    <div class="container"> 
    </div> 
</body> 
  
</html>

test.less is the less file that is imported multiple times in the styles.less file, which is given below:

CSS

@body-bg-color: #eeeeee; 
@text-color: rgb(0, 200, 100); 
@container-bg: rgb(220, 43, 55); 
  
body { 
    background: @body-bg-color; 
} 
  
.container{ 
    height:100px;   
    width: 100px;   
    padding: 30px 0px 0px 25px;   
    background-color: (#cc3eff);   
    color:yellow;   
}

styles.less is compiled into a CSS file which is given further below:

CSS

@import (once) "test.less"; 
  
// This statement will be ignored 
@import (once) "test.less"; 

The CSS output of the above Less file was compiled.

CSS

body { 
    background: #eeeeee; 
} 
.container { 
    height: 100px; 
    width: 100px; 
    padding: 30px 0px 0px 25px; 
    background-color: #cc3eff; 
    color: yellow; 
}

Output:

Example 2: The code below demonstrates the usage and implementation of the @import (once) with the hue color channel function, if and boolean logical functions. Here we import multiple LESS files with identical names and they are compiled only once.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          type="text/css" 
          href="style.css"/> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1>  
    <h3>Less.js @import At-Rules once</h3> 
    <div class="container"> 
        <p class="text">BOX</p> 
    </div> 
</body> 
  
</html>

test.less is the less file that is imported multiple times in the styles.less file, which is given below.

CSS

@body-bg-color: #eeeeee; 
@text-color: rgb(80, 188, 134); 
@container-bg: rgb(255, 178, 24); 
@cond1: boolean(hue(@text-color) > 50%); 
  
body { 
    background: @body-bg-color; 
} 
  
.container{ 
    height:100px;     
    width: 150px;   
    padding: 30px 0px 0px 25px;   
    background-color: #6a001e;   
    color:yellow;   
} 
.text{ 
    font-weight: if(@cond1, bold, bolder);   
    color: aquamarine; 
}

styles.less is compiled into a CSS file which is given further below.

CSS

@import (once) "test.less"; 
@import (once) "test.less"; //this statement will be ignored

The CSS output of the above Less file was compiled.

CSS

body { 
    background: #eeeeee; 
} 
.container { 
    height: 100px; 
    width: 150px; 
    padding: 30px 0px 0px 25px; 
    background-color: #6a001e; 
    color: yellow; 
} 
.text { 
    font-weight: bold; 
    color: aquamarine; 
}