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
Similar Reads
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 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 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
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 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 multiple
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 usa
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 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 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
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