Google Choice: Less - Import Directives

Friday, March 3, 2017

Less - Import Directives

Description

The @import directive is used to import the files in the code. It spread the LESS code over different files and allows to maintain the structure of code easily. You can put @import statements anywhere in the code.
For instance, you can import the file by using @import keyword as @import "file_name.less".

File Extensions

You can use @import statements depending on the different file extensions such as:

If you are using .css extension, then it will be considered as CSS and @import statement kept as it is.
If it contains any other extension, then it will be considered as LESS and will be imported.
If there is no less extension, then it will appended and included as imported less file.

@import "style";      // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php";  // imports the style.php as a less file
@import "style.css";  // it will kept the statement as it is

Example

The below example demonstrates use of variable in the SCSS file:

<!doctype html>
<head>
   <title>Import Directives</title>
   <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
   <h2>Example of Import Directives</h2>
   <p class="myline">Welcome to Tutorialspoint...</p>
</body>
</html>

Next, create file import_dir.less.

import_dir.less

.myline {
 font-size: 20px;
}

Next, create file style.less.

style.less

@import "http://www.tutorialspoint.com/less/import_dir.less";
.myline {
  color:#FF0000;
}

The import_dir.less file will get imported into style.less file from the path http://www.tutorialspoint.com/less/import_dir.less.
You can compile the style.less to style.css by using the following command:

lessc style.less style.css

Next execute the above command, it will create style.css file automatically with the below code:

style.css

.myline {
  font-size: 20px;
}
.myline {
  color: #FF0000;
}

Output

Let's carry out the following steps to see how above code works:

Save above html code in import_directives.html file.
Open this HTML file in a browser, an output as below gets displayed.

পৃষ্ঠাসমূহ

Labels

.

Search Your Article

Total Pageviews