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 language called the CSS pre-processor so that web browsers may use it. It is also a CSS language extension that provides features like variables, functions, mixins, and operations that help us develop dynamic CSS while retaining backward compatibility.
In this article we are going to see the Less.js@import At-Rules reference is used to import external files but the imported code is not added to the compiled CSS file. This provides two options to us which are extend and mixins, and the result may vary depending upon which option is being chosen. When the selector is extended, only the new selector has this designation, and it is inserted after the reference @import declaration. A reference style’s rules are mixed-in, tagged “not reference,” and appear in the preferred location as usual when it is used as an implicit mixin.
Syntax:
@import (reference) "value";
Parameters:
- value: This is the compulsory parameter for @import (reference), this generally contains a file path or a filename that directs to the main file.
Example 1: The code below demonstrates the usage and implementation of the @import (reference). Here we have used the extend then the extended part is just imported to the CSS code.
index.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1 style="color:green">neveropen</h1> <h3><b>Less.js @import At-Rules optional</b></h3> <div class="container"> </div> <br> <p class="text">Box1</p> <p id="test">Box2</p> </body> </html> |
styles.less
@import (reference) "test.less"; .container:extend(.container all){ } |
test.less
@body-bg-color: #eeeeee; @text-color: rgb(0, 200, 100); @container-bg: rgb(220, 43, 55); body { background: @body-bg-color; } .container { height: 100px; width: 100px; padding: 30px 0px 0px 25px; background-color: (#cc3eff); color: yellow; } .text, #test { color: brown; font-size: 2rem; } |
Now, to compile the above LESS code to CSS code, run the following command:
lessc styles.less styles.css
The compiled CSS file comes to be:
style.css
.container { height: 100px; width: 100px; padding: 30px 0px 0px 25px; background-color: #cc3eff; color: yellow; } |
Output:
Example 2: The code below demonstrates the usage and implementation of the @import (reference). Here we have used implicit mixins and the code of the mixin is just imported to the CSS code.
index.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <h1 style="color:green">neveropen</h1> <h3><b>Less.js @import At-Rules Reference</b></h3> <div class="container"> </div> <br> <p class="mixed-in">Box1</p> <p class="mix-in">Box2</p> </body> </html> |
styles.less
@import (reference) "test.less"; .mix-in{ .text(); } .mixed-in{ #test(); } |
Copy Generated Ide URL
Now, to compile the above LESS code to CSS code, run the following command:
lessc styles.less styles.css
The compiled CSS file comes to be:
style.css
.mix-in { color: brown; font-size: 2rem; } .mixed-in { color: brown; font-size: 2rem; } |
Output:
Reference: https://lesscss.org/features/#import-atrules-feature-reference
