Less.js @import At-Rules css

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. It is a dynamic style sheet language that makes CSS more powerful. LESS provides cross-browser compatibility. A programming language called CSS pre-processor is used to enhance CSS and compile it for use by web browsers. In addition, it is a language extension for CSS that provides capabilities like variables, functions, mixins, and operations that let us create dynamic CSS while yet preserving backward compatibility.

Less.js @import At-Rules css is used to handle the imported files as regular CSS nevertheless what extension it has. And the imported code will be added to the CSS compiled code as regular CSS code. This gives ‘@import “value”;‘ as the output, so it doesn’t provide direct CSS code or directly compiles the LESS code into CSS rather it provides the direct importing of the particular file.

Syntax:

@import (css) "value";

Parameter value:

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

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

Example 1: The code below demonstrates the usage and implementation of the @import (css). Here we import a less file into another less file which is further compiled into CSS code.

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 css</h3> 
    <div class="container"></div> 
</body> 
  
</html>

b.less is the less file that is imported by the test.less in the css implementation using the @import (css).

CSS

@body-bg-color: #eeeeee; 
@text-color: rgb(80, 188, 134); 
@container-bg: rgb(255, 178, 24); 
  
body { 
    background: @body-bg-color; 
} 
  
.container{ 
    height:100px;     
    width: 150px;   
    padding: 30px 0px 0px 25px;   
    background-color: #6a001e;   
}

test.less:

@import (css) "b.less";

style.less which is compiled and processed from the text.less. This is compiled into a CSS file which is given further below:

@import "b.less";

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; 
}

Output:

Example 2: The code below demonstrates the usage and implementation of the @import (css) with the hue color channel function, if and boolean logical functions. Here we import a less file into another less file which is further compiled into CSS code.

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 css</h3> 
    <div class="container"> 
        <p class="text"></p> 
      </div> 
</body> 
  
</html>

b.less is the less file that is imported by the test.less in the css implementation using the @import (css).

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, semi-bold); 
    color: aquamarine; 
}

test.less:

@import (css) "b.less";

styles.less which is compiled and processed from the text.less. This is compiled into a CSS file which is given further below:

@import "b.less";

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; 
} 