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 scripting language that improves CSS and gets compiled into regular CSS syntax so that the web browser can use it. It is also a backward-compatible language extension for CSS that provides functionalities like variables, functions, mixins, and operations that enable us to build dynamic CSS.
Less.js @import At-Rules:
Less.js @import At-Rules is basically used to import the file 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.
Import Option:
In the import, options “less” offer several extensions to the CSS @import CSS at-rule to provide more flexibility over what you can do with external files. More than one keyword per @import is allowed, you will have to use commas to separate the keywords.
Example: @import (inline, multiple) “filename. less”;
There are some import options that have been implemented.
- @import (reference) “filename.less”;
Parameter: Reference uses a LESS file only as a reference and will not output it.
- @import(inline) “filename.less”;
Parameter: Inline enables you to copy your CSS into the output without being processed.
- @import(less) “filename.less”;
Parameter: Less treats the imported file as the regular LESS file, despite whatever may be the file extension.
- @import(CSS) “filename.less”;
Parameter: CSS treats the imported file as the regular CSS file, despite whatever may be the file extension.
- @import(once) “filename.less”;
Parameter: Import the file only one time.
- @import(multiple) “filename.less”;
Parameter: It includes the file multiple times
- @import(optional) “filename.less”;
Parameter: It continues compiling even though the file to import is not found.
Syntax:
@import (keyword) "filename";
Example 1: The following example demonstrates the use of the import option in less.js
HTML
<html> <head> <link rel="stylesheet" href="style.css" /> </head> <body> <h1 class="hello">neveropen</h1> <h3><b>@import At-Rules import option</b></h3> </body> </html> |
style.less: Create the less file.
CSS
@color:green; @width:40px; .hello { color: @color; width: @width; font-family: sans-serif; } |
style.less: Create a “.less” file to import the file with the import option.
CSS
@import (less) "One.less"; |
Now, to compile the above LESS code to CSS code, run the following command:
lessc style.less style.css
The compiled CSS file comes to be:
style.css
CSS
.hello { color: green; width: 40px; font-family: sans-serif; } |
Output:
Example 2: This example demonstrates the use of the import option in less.
HTML
<html> <head> <link rel="stylesheet" href="style.css" /> </head> <body><br><br> <h1 class="one">neveropen</h1> <h3><b>@import At-Rules import option</b></h3> </body> </html> |
first.less: Create the less file.
CSS
@border-co:lightgray; @width:200px; @borderWid:15px; @padding:20px; @margin:20px; .one { border-color: @border-co; width: @width; border: @borderWid solid green; outline: @padding dashed red; padding:@padding; margin: @margin; } |
style.less: Create a “.less” file to import the file with the import option with multiple options.
Javascript
@import (multiple) "first.less"; |
Syntax: To compile the less file to a CSS file, write the following command.
lessc style.less style.css
Execute the above command, it will create the “style.css” file automatically with the following code.
style.css:
CSS
.one { border-color: lightgray; width: 200px; border: 15px solid green; outline: 20px dashed red; padding: 20px; margin: 20px; } |
Output:
Reference: https://lesscss.org/features/#import-atrules-feature-import-options
