Less.js @import At-Rules optional
Last Updated :
27 Sep, 2022
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, CSS is enhanced and compiled for use by web browsers. Furthermore, it is a CSS language extension that provides features like variables, functions, mixins, and operations that let us create dynamic CSS while yet keeping backward compatibility.
Less.js @import At-Rules optional is a keyword that is used to allow to import the file when it exists, otherwise the FileError will be thrown, without implementing the optional keyword & the compilation of code will stop if the particular file that is need to import, is not found.
Syntax:
@import (optional) "value";
Parameter value:
- value: This is the compulsory parameter for @import (optional), & this generally contains a file path or a filename that directs to the main file.
Please refer to the Less.js Installation article for detailed installation procedure.
Example 1: The below code example demonstrates the usage and implementation of the @import (optional) in LESS.js where we import a LESS file that doesn’t exist with & without using the optional keyword.
HTML
<!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 optional</ h3 >
< div class = "container" ></ div >
</ body >
</ html >
|
style.less
@import (optional) "text.less" ;
@import "text.less" ;
|
Output: In the below output, we can see that the importing the file with using the optional keyword, is passed, but without it, will gives an error.
Example 2: The below code example demonstrates the usage and implementation of the @import (optional), where we import a LESS file that does exist and one that doesn’t exist with the optional keyword.
HTML
<!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 optional</ h3 >
< div class = "container" ></ div >
</ body >
</ html >
|
style.less
@import (optional) "test.less" ;
@import (optional) "text.less" ;
|
test.less: This is the less file that does exist.
test.less
@body-bg- color : #eeeeee ;
body {
background : @body-bg-color;
}
.container{
height : 100px ;
width : 100px ;
padding : 30px 0px 0px 25px ;
background-color : ( #cc3eff );
}
|
The CSS output of the above Less file was compiled.
CSS
body {
background : #eeeeee ;
}
.container {
height : 100px ;
width : 100px ;
padding : 30px 0px 0px 25px ;
background-color : #cc3eff ;
}
|
Output:
Reference: https://lesscss.org/features/#import-atrules-feature-optional
Share your thoughts in the comments
Please Login to comment...