Less.js @import At-Rules less
Last Updated :
16 Feb, 2023
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 can separate and maintain our code structure easily. Less.js (Leaner Style Sheets) is an extension to normal CSS which basically enhances the abilities of normal CSS and gives superpowers to it.
Syntax:
@import (less)"lessfile";
Note: If there are no extensions then it will automatically append the .less extensions.
Parameter:
- Use @import (less) which is used to treat imported files as Less, regardless of the file extension.
Example 1:The following example demonstrates the use of @import at-rules less:
index.html
<html>
<head>
<link rel="stylesheet" href="style.css"
type="text/css" />
<title>Import less</title>
</head>
<body>
<h1 class="myclass">Welcome to GeeksforGeeks</h1>
<h3 class="text">Less.js import less @</h3>
</body>
</html>
|
style.less
@import (less) "style2";
@var: @a;
@a: 15px;
.text {
font-size: @var;
color: green;
text-decoration: underline;
}
|
Now, to compile the above LESS code to CSS code, run the following command:
less style.less style.css
The compiled CSS file comes to be:
style.css
.myclass {
color: aqua;
}
.text {
font-size: 15px;
color: green;
text-decoration: underline;
}
|
Output:
Example 2: The following example demonstrates the use of @import at-rules less:
index.html
<html>
<head>
<link rel="stylesheet" href="lee1.css"
type="text/css" />
<title>Import less</title>
</head>
<body>
<h1 class="myclass">Welcome to GeeksforGeeks</h1><br>
<h3 class="text">hello everyone</h3>
</body>
</html>
|
lee.less
.myclass{
&:hover{
color: rgb(140, 0, 255);
text - decoration: dotted;
text - align: center;
}
}
|
lee1.less
@import(less) "lee";
@primary-color: green;
@a: 15px;
.text{
font - size: @a;
color: @primary-color;
text - decoration: underline;
}
|
To compile the less file to a CSS file write the following command:
less lee1.less lee1.css
The compiled CSS file comes to be:
lee1.css
.myclass:hover {
color: #8c00ff;
text-decoration: dotted;
text-align: center;
}
.text {
font-size: 15px;
color: green;
text-decoration: underline;
}
|
Output:
When the cursor goes to the upside its color and text align change because of hover.
Reference:https://lesscss.org/features/#import-atrules-feature-less
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...