Less.js @import At-Rules multiple
Last Updated :
27 Sep, 2022
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 usage by web browsers using a programming language called CSS pre-processor. Additionally, it is a CSS language extension that offers tools like variables, functions, mixins, and operations that enable us to construct dynamic CSS while yet maintaining backward compatibility.
Less.js @import At-Rules multiple is used to add multiple files with identical names, and the imported code will be added to the CSS compiled code by extracting the code. This gives the code in the files imported as the output.
Syntax:
@import (multiple) "value";
Parameter value:
- value: This is the compulsory parameter for @import (multiple), this generally contains a file path or a filename that directs to the main file.
Please refer to the Less.js Installation article for a detailed installation procedure.
Example 1: The below code example demonstrates the usage and implementation of the @import (multiple), where we import multiple LESS files with identical names, and they are further compiled.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="style.css"/>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Less.js @import At-Rules multiple</h3>
<div class="container"></div>
</body>
</html>
|
test.less is the less file that is imported multiple times in the styles.less file, which is given below:
CSS
@body-bg-color: #eeeeee;
@text-color: rgb(80, 188, 134);
@container-bg: rgb(255, 178, 24);
@cond1: boolean(hue(@text-color) > 50%);
body {
background: @body-bg-color;
}
.container{
height:100px;
width: 150px;
padding: 30px 0px 0px 25px;
background-color: #6a001e;
color:yellow;
}
.text{
font-weight: if(@cond1, bold, bolder);
color: aquamarine;
}
|
style.less is compiled into a CSS file which is given further below:
CSS
@import (multiple) "test.less";
@import (multiple) "test.less";
|
The CSS output of the above Less file was compiled.
CSS
body {
background: #eeeeee;
}
.container {
height: 100px;
width: 150px;
padding: 30px 0px 0px 25px;
background-color: #6a001e;
color: yellow;
}
.text {
font-weight: bold;
color: aquamarine;
}
|
Output:
Example 2: The below code example demonstrates the usage and implementation of the @import (multiple) with the hue color channel function, if and boolean logical functions. Here we import multiple LESS files with identical names and they are further compiled.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="style.css"/>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Less.js @import At-Rules multiple</h3>
<div class="container">
<p class="text">BOX</p>
</div>
</body>
</html>
|
test.less is the less file that is imported multiple times in the styles.less file, which is given below:
CSS
@body-bg-color: #eeeeee;
@text-color: rgb(80, 188, 134);
@container-bg: rgb(255, 178, 24);
@cond1: boolean(hue(@text-color) > 50%);
body {
background: @body-bg-color;
}
.container{
height:100px;
width: 150px;
padding: 30px 0px 0px 25px;
background-color: #6a001e;
color:yellow;
}
.text{
font-weight: if(@cond1, bold, bolder);
color: aquamarine;
}
|
styles.less is compiled into a CSS file which is given further below.
CSS
@import (multiple) "test.less";
@import (multiple) "test.less";
|
The CSS output of the above Less file was compiled:
CSS
body {
background: #eeeeee;
}
.container {
height: 100px;
width: 150px;
padding: 30px 0px 0px 25px;
background-color: #6a001e;
color: yellow;
}
.text {
font-weight: bold;
color: aquamarine;
}
|
Output:
Reference: https://lesscss.org/features/#import-atrules-feature-multiple
Similar Reads
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 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
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 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 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 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 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 @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
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
4 min read