Less.js @import At-Rules less
Last Updated :
23 Jul, 2024
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>
@import (less) "style2";
@var: @a;
@a: 15px;
//This is a class text//
.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>
.myclass{
&:hover{
color: rgb(140, 0, 255);
text - decoration: dotted;
text - align: center;
}
}
@import(less) "lee";
@primary-color: green;
@a: 15px;
//This is a class text//
.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
Similar Reads
Less.js @import At-Rules 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
3 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 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 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 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 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