Less.js @import At-Rules is basically used to import the file which is 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.
All other types of rules must come after @import at-rules in standard CSS. However, Less is unconcerned about the placement of @import declarations.
File extension:
// file_name.less is imported
@import "file_name";
// file_name.less is imported
@import "file_name.less";
// file_name.php imported as a Less file
@import "file_name.php";
// statement left in place, as-it-is
@import "file_name.css";
Syntax:
@import "filename";
// and also we can import
@import (keyword) "filename";
Before using @import we have to install :
npm install import
Example 1:
Step 1: Create the working directory, along with creating a subfolder named CSS, and then create a file named one.less inside it.
Step 2: Add the following code to the newly created file and save it:
Filename: one.less
css
.dashed {
border-style: dashed;
outline: 20px solid green;
}
Step 3: Now inside the CSS subfolder, create a new file named two.less inside the two. less file writes the code to import the file.
With the use of @import (multiple), it allows importing of multiple files. Here, I have used the @import (multiple)" one. less" two times so it will give the. dashed { }  two times . If  I will use @import (multiple)" one. less"  one time then .dashed will give only one time.
Filename: two.less
css
@import (multiple)"one.less";
@import (multiple)"one.less";
To compile the code write the following:
first, we have to go CSS subfolder. To go CSS subfolder write the following command on the terminal.
cd CSS
After the CSS subfolder, write the following command to compile the code.
less two.less
Output: The output will be shown like this.
.dashed {
border-style: dashed;
outline: 20px solid green;
}
.dashed {
border-style: dashed;
outline: 20px solid green;
}
Example 2:
Step 1: First create the One.less, inside it add the following code, and save it.
Filename: One.less
css
@primary-color: black;
@text-color: green;
@color: red;
@sonu: #483d8b;
body {
background: @primary-color;
}
h1 {
color: @text-color;
text-align: center;
}
h2 {
color: @color;
text-align: center;
}
h3 {
color: @sonu;
text-align: center;
}
Step 2: Then create another file named Two.css, Â inside it add the following code, and save it.
Filename: two.less
css
body {
background: black;
}
h1 {
color: green;
text-align: center;
}
h2 {
color: red;
text-align: center;
}
h3 {
color: #483d8b;
text-align: center;
}
Step 3: After the second steps import the One. less, and Two.css and save the file named with variable.css.
Here using @import "filename":
Filename: variable.css
css
@import "One.less";
@import "Two.css";
Step 4: After importing the file linked the variable.css to the HTML file.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="variable.css" >
</head>
<title>GeeksforGeeks</title>
<body>
<h1>
GeeksforGeeks
</h1>
<h3>
@import At-Rules
Import styles from other style sheetsIn standard CSS,
@import at-rules must precede all other types of rules.
</h3>
<h2>Computer Science</h2>
</body>
</html>
Output:
Â
Reference: https://lesscss.org/features/#import-atrules-feature
Similar Reads
Less.js @import At-Rules css
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 us
3 min read
Less.js @import At-Rules less
In this article, we will see that Less.js @import At-Rules is basically used to import the file which is 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 c
2 min read
Less.js @import At-Rules once
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
3 min read
Less.js @import At-Rules Inline
Less.js (Leaner Style Sheets) 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 enhances the working power of CSS. LESS supports cross-browser compatibility. CSS pre-processor is
3 min read
Less.js @import At-Rules optional
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 expands the capabilities of CSS. LESS provides cross-browser compatibility. Using a computer language called CSS pre-processor, C
2 min read
Less.js @import At-Rules multiple
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 boosts the functionality of CSS. Cross-browser interoperability is offered via LESS. CSS is improved and compiled for usa
3 min read
Less.js @import At-Rules Reference
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. With the help of this dynamic style sheet language, CSS is more functional. LESS offers cross-browser compatibility. CSS is improved and compiled using a computer
3 min read
Less.js @import At-Rules Import Options
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
3 min read
Less.js @import At-Rules File Extensions
Less.js (Leaner Style Sheets) 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 enhances the working power of CSS. LESS supports cross-browser compatibility. CSS pre-processor is
3 min read
Less.js @plugin At-Rules
In this article, we will understand the concepts related to Less.js @plugin At-Rules with different illustrations and examples. Less.js @plugin At-Rules is used to import the JavaScript plugin to add additional functions and features. Basically using the @plugin at rule is similar to an @import for
4 min read