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.
<!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:
@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:
@import (multiple) "test.less";
@import (multiple) "test.less";
|
The CSS output of the above Less file was compiled.
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.
<!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:
@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.
@import (multiple) "test.less";
@import (multiple) "test.less";
|
The CSS output of the above Less file was compiled:
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