Less.js @import At-Rules Import Options
Last Updated :
16 Oct, 2022
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" >GeeksforGeeks</ 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" >GeeksforGeeks</ 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...