Less Importing

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

Less Importing

In Less, importing is used to import the content of the Less or CSS files. @import statements may be treated differently by Less depending on the file extension.

Let's take an example to demonstrate how to use importing in a Less file.

Create a HTML file named "simple.html", having the following data.

HTML file: simple.html

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.    <title>Less Importing</title>  
  5.    <link rel="stylesheet" type="text/css" href="simple.css" />  
  6. </head>  
  7. <body>  
  8.    <h1>Less Importing Example</h1>  
  10.    <p class="myclass">Life Time Validity.</p>  
  11.    <p class="myclass1">Training by Java Professionals.</p>  
  12.    <p class="myclass2">Small Batches to focus on each student.</p>  
  13. </body>  
  14. </html>  

Next, create an external file named "myfile.less" that you want to import.

Less file: myfile.less

  1. .myclass{  
  2.     color: blue;  
  3. }  
  4. .myclass1{  
  5.     color: red;  
  6. }   

Now create a Less file named "simple.less", having the importing path.

Less file: simple.less

  1. @import "myfile.less";  
  2. .myclass2  
  3. {  
  4. color: brown;  
  5. }  

The myfile.less file will be imported into simple.less from the path myfile.less

Now, put the both file "simple.html" and "simple.less" inside the root folder of Node.js

Now, execute the following code: lessc simple.less simple.css

Less Less importing1

This will compile the "simple.less" file. A CSS file named "simple.css" will be generated.

For example:

Less Less importing2

The generated CSS "simple.css", has the following code:

  1. .myclass {  
  2.   color: blue;  
  3. }  
  4. .myclass1 {  
  5.   color: red;  
  6. }  
  7. .myclass2 {  
  8.   color: brown;  
  9. }  


Less Less importing3