Importing - (Less Basics)

In Less, we can use the @import statement to include one Less file into another. In this tutorial, we'll take a look at how to use @import statement in Less.

Syntax

@import "path/to/file";

In this syntax, path/to/file refers to the path of the Less file that you want to import.

Example

Let's say we have two Less files, style.less and variables.less. We want to use variables defined in variables.less in style.less. Here's how we can do that:

/* variables.less */

@primary-color: #007bff;
@secondary-color: #6c757d;

/* style.less */

@import "variables.less";

body {
  background-color: @primary-color;
  color: @secondary-color;
}

As you can see, we used the @import statement to import variables.less into style.less. Now, we can use the variables defined in variables.less in style.less.

Explanation

The @import statement in Less is used to include one Less file into another. When you use @import statement, the contents of the imported file are added to the file that imports it. This means that any variables or mixins defined in the imported file are available in the file that imports it.

Use

The @import statement is useful when you have variables or mixins that are used across multiple Less files. Instead of defining these variables or mixins in every file, you can define them once in a separate file and use the @import statement to include them in other files.

Important Points

• Be careful when using @import statement to include files. If you import too many files, it can slow down your website's loading time.
• You can use variable interpolation in the @import statement. For example, @import "path/to/@{filename}.less" will import the file path/to/filename.less if the variable filename is set to filename.
• You can use the @import statement to import CSS files as well as Less files. However, be aware that any variables or mixins defined in the CSS file won't be available in the Less file that imports it.

Summary

In this tutorial, we discussed the @import statement in Less. We covered the syntax, example, explanation, use, and important points of the @import statement. You can use the @import statement to include one Less file into another, making variables and mixins defined in the imported file available in the file that imports it.