In this chapter, one can learn about Less Import and how to import the Less files.
Importing in LESS works similar to regular CSS importing. In general, people may split their style sheets into multiple files, instead of putting them in one place. So, they can import them with the command @import
to another stylesheet whenever required.
Below are some of the benefits of using import.
- Variables are shared across the imports.
- Easy to collaborate with others.
- The front-end development can have a modular and dry approach.
Following is a simple example that explains the use of imports in LESS CSS.
The below conceptual diagram represents the overall view like creating .html and .less files in node js folder and compile .less to .css
files as shown below. Make sure that both the files are created in the Nodejs folder.
<link rel="stylesheet" type="text/css" href="style.css">
<h1>Less Css Importing benefits</h1>
<p class="myclass">Variables are shared across the imports.</p>
<p class="myclass1">Easy to collaborate with others.</p>
<p class="myclass2">The front-end development can have a modular and dry approach.</p>
Now, create two .less files as shown below.
@import “<a href="C:\Users\saikiran chenagoni\less\sample.less">C:\Users\saikiran chenagoni\less\sample.less</a>”;
Compile the above codes in command prompt using the below command.
lessc style.less style.css
By compiling the above .less file, it automatically generates .css file as shown below.
After completing all the required changes, run the html file in a browser, so that one can get the following output.
- Multiple files can be imported using
@import command whenever needed.
- The major benefit of imports is it can easily collaborate with each other.
- Make sure to create the files in Node js folder.
- Make sure to give the correct path in the code to import the required file.