Less.js @import At-Rules Import Options
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.
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.
@import (keyword) "filename";
Example 1: The following example demonstrates the use of the import option in less.js
style.less: Create the less file.
style.less: Create a “.less” file to import the file with the import option.
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:
Example 2: This example demonstrates the use of the import option in less.
first.less: Create the less file.
style.less: Create a “.less” file to import the file with the import option with multiple options.
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.
Please Login to comment...