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 a scripting language that improves CSS and gets compiled into regular CSS syntax so that it can be used by the web browser. 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.
The Less.js @import At-Rules is used to import the file which is in the source code. We can put the @import statement anywhere in the source code. The @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. The File Extension is usually a character that is added at the end of the file name, separated by a dot symbol. It is useful to computer programs and basically tells them, what kind of data and file type they are working with and what associated program opens the file. In Less, the @import statement can be utilized differently that depends on the file extension used, which is described below:
- @import “filename”: filename.less file is imported.
- @import “filename.css”: If the file has a .css extension, it will be treated as CSS and the @import statement will be left as it is.
- @import “file.php”: If it has any other extension like here we have given a .php extension so it will be treated as Less and imported.
- @import “filename”: If it does not have an extension, .less will be appended and included as an imported Less file.
Syntax:
@import "filename.extension";
Note: The extension can be less, CSS, PHP, etc. If there are no extensions in the file it will automatically append the .less extension to that file.
Example 1: The following example demonstrates the use of file extension in less.js.
HTML
<!DOCTYPE html><html><head> <title>Less.js @import At-Rules</title> <link rel="stylesheet" href="Two.css" type="text/css" /></head><body> <div class="textcolor"> <h2>Welcome to GeeksForGeeks</h2> <h3 class="text"> Less.js At Rules File extension </h3> </div></body></html> |
Next, create less file “One. less “. Then added the below less code:
.text {
font-size: 20px;
}
Please Login to comment...