LESS - Importing

Advertisements

Previous Page
Next Page  

Description

It is used to import the contents of the LESS or CSS files.

Example

The following example demonstrates the use of importing in the LESS file −

<html>
   <head>
      <title>Less Importing</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>

   <body>
      <h1>Example using Importing</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "myclass1">It allows reusing CSS code and 
      writing LESS code with same semantics.</p>
      <p class = "myclass2">LESS supports creating cleaner, 
      cross-browser friendly CSS faster and easier.</p>
   </body>
</html>

Now create the myfile.less file.

myfile.less

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

Now create the style.less file.

style.less

@import "http://www.howcodex.com/less/myfile.less";
.myclass2 {
   color: #FF0000;
}

The myfile.less file which will be imported into style.less from the path https://www.howcodex.com/less/myfile.less

You can compile the style.less file to style.css by using the following command −

lessc style.less style.css

Execute the above command; it will create the style.css file automatically with the following code −

style.css

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

.myclass2 {
   color: #FF0000;
}

Output

Follow these steps to see how the above code works −

  • Save the above html code in the importing.html file.

  • Open this HTML file in a browser, the following output will get displayed.

Less Importing
Advertisements