Chapter 7
Less Import Directives
Introduction
This chapter explains about Less Import Directives and different file extensions for Importing.
Description
The files in a code can be imported using the
@import directive in Less. One can maintain the code structure easily by using the Less import directive and spread the code across different files. In the case of CSS, the @import statement must precede all other rules, whereas, in Less @import statement can be used anywhere in the code. Syntax
@import “file_name.less” Description
Depending on the file extension, the files are treated differently by the
@import statement.- The file with .css extension is considered as CSS and the
@importstatement imports the file as it is. - The files with different extensions are considered as Less and imported.
- The files without any extension are considered as .less files and included in an imported Less file.
@import "foo"; // foo.less is imported @import "foo.less"; // foo.less is imported @import "foo.php"; // foo.php imported as a less file @import "foo.css"; // statement left in place, as it is
Example
Below example explains the use of import directive in less.
Conceptual
figure
The below conceptual diagram represents the overall view about the example like creating .html and .less files in node js folder and compiling .less to .css
Step 1
Create a HTML file in the Nodejs folder as shown below.
import_dir.html
<head> <title>Import Directives</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <h2>Welcome to SPLessons</h2> <p class="myline">small example on Less Import directives</p> </body> </html>
Step 2
Now, create two less files in the same Nodejs folder as shown below.
import_dir.less
.myline {
font-size: 20px;
}
style.less
@import "C:\Users\Samuel\nodejs\import_dir.less";
.myline {
color: #5858FA;
}
Step 3
Compile the above code in the command prompt by using the command.
lessc style.less style.css
Step 4
By compiling the above .less file, it automatically generates .css file as shown below.
style.css
.myline {
font-size: 20px;
}
.myline {
color: #5858FA;
}
Result
After making all the required changes, you need to run the html file in a browser to get the following output.
Key Points
- The code structure can be maintained easily using the
@importdirective. - Using the file extension, the
@importstatement defines the file in less.
Programming
Tips
- Make sure that @import statement is defined before importing a file.
- Create both .html and .less files in the node js folder.
- Make sure to give the correct path for importing a file into the code.