Open In App

Less.js @import At-Rules

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 06 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads