Less.js @import At-Rules Import Options

Last Updated : 16 Oct, 2022

LESS is a Leaner Style Sheets, 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 enhances the working power of CSS. LESS supports cross-browser compatibility. CSS pre-processor is a scripting language that improves CSS and gets compiled into regular CSS syntax so that the web browser can use it. It is also a backward-compatible language extension for CSS that provides functionalities like variables, functions, mixins, and operations that enable us to build dynamic CSS.

Less.js @import At-Rules:

Less.js @import At-Rules is basically used to import the file in the source code. And we can put the @import statement anywhere in the source code. And @import At-Rules allow us to spread the less code over to different files. Using the @import keyword we can separate and maintain our code structure easily.

Import Option:

In the import, options “less” offer several extensions to the CSS @import CSS at-rule to provide more flexibility over what you can do with external files. More than one keyword per @import is allowed, you will have to use commas to separate the keywords.

Example: @import (inline, multiple) “filename. less”;

There are some import options that have been implemented.

@import (reference) “filename.less”;

Parameter: Reference uses a LESS file only as a reference and will not output it.

@import(inline) “filename.less”;

Parameter: Inline enables you to copy your CSS into the output without being processed.

@import(less) “filename.less”;

Parameter: Less treats the imported file as the regular LESS file, despite whatever may be the file extension.

@import(CSS) “filename.less”;

Parameter: CSS treats the imported file as the regular CSS file, despite whatever may be the file extension.

@import(once) “filename.less”;

Parameter: Import the file only one time.

@import(multiple) “filename.less”;

Parameter: It includes the file multiple times

@import(optional) “filename.less”;

Parameter: It continues compiling even though the file to import is not found.

Syntax:

@import (keyword) "filename";

Example 1: The following example demonstrates the use of the import option in less.js

HTML

<html> 
   
<head>   
    <link rel="stylesheet" href="style.css" />  
</head> 
   
<body> 
    <h1 class="hello">GeeksforGeeks</h1> 
    <h3><b>@import At-Rules import option</b></h3>     
</body> 
</html>

style.less: Create the less file.

CSS

@color:green; 
@width:40px; 
.hello 
{ 
    color: @color; 
    width: @width; 
    font-family: sans-serif; 
}

style.less: Create a “.less” file to import the file with the import option.

CSS

@import (less) "One.less";

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

lessc style.less style.css

The compiled CSS file comes to be:

style.css

CSS

.hello { 
    color: green; 
    width: 40px; 
    font-family: sans-serif; 
} 

Output:

Example 2: This example demonstrates the use of the import option in less.

HTML

<html> 
   
<head>   
    <link rel="stylesheet" href="style.css" />  
</head> 
   
<body><br><br> 
    <h1 class="one">GeeksforGeeks</h1> 
    <h3><b>@import At-Rules import option</b></h3>     
</body> 
</html>

first.less: Create the less file.

CSS

@border-co:lightgray; 
@width:200px; 
@borderWid:15px; 
@padding:20px; 
@margin:20px; 
.one  
{ 
    border-color: @border-co; 
    width: @width; 
    border: @borderWid solid green; 
    outline: @padding dashed red; 
    padding:@padding; 
    margin: @margin;          
}

style.less: Create a “.less” file to import the file with the import option with multiple options.

Javascript

@import (multiple) "first.less";

Syntax: To compile the less file to a CSS file, write the following command.

lessc style.less style.css

Execute the above command, it will create the “style.css” file automatically with the following code.

style.css:

CSS

.one { 
    border-color: lightgray; 
    width: 200px; 
    border: 15px solid green; 
    outline: 20px dashed red; 
    padding: 20px; 
    margin: 20px; 
} 