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; 
}