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>
@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>
@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