How to use variables in different less files?

When using LESS, a CSS preprocessor, we can simplify our workflow by defining variables, making styles more modular and maintainable. Using variables across different LESS files primarily involves defining and importing variables.

Step 1: Define Variables

First, define your variables in a LESS file. For example, create a file named variables.less and define commonly used style variables within it:

less
// variables.less
@primary-color: #4A90E2;
@font-stack: 'Helvetica Neue', Arial, sans-serif;

Step 2: Import the Variables File

Next, before using these variables in other LESS files, import the variables.less file using the @import directive:

less
// styles.less
@import "variables.less";

body {
  color: @primary-color;
  font-family: @font-stack;
}

Example

Suppose we have a website project with multiple LESS files, and we want to consistently use some basic color and font settings across them.

variables.less:

less
// Define basic colors and fonts
@primary-color: #4A90E2;
@secondary-color: #C4C4C4;
@font-stack: 'Helvetica Neue', Arial, sans-serif;

header.less:

less
// Import variables
@import "variables.less";

.header {
  background-color: @primary-color;
  color: white;
}

footer.less:

less
// Import variables
@import "variables.less";

.footer {
  background-color: @secondary-color;
  color: @primary-color;
}

Advantages

Using this method, we can ensure consistency across the entire project for all colors and fonts. If future adjustments to the theme color or font are needed, we only need to modify the corresponding variable values in variables.less, and all references to these variables will automatically update, making it convenient and reducing the chance of errors.

This approach enhances code maintainability and scalability, making the project appear more professional and easier to manage.