How to make a default variable in less like sass's !default tag

Question

I have a global.less file which calls a variables.less file and then a component.less file.

I want to have default variables set-up inside the component file and be able to override them in the variables file.

But the component file comes after the less file so the default component variables will override the variables set in the variables.less file.

Is there any option in Less I can use like Sass's !default keyword?

Answer 1

The solution as stated by @seven-phases-max is to move the variables.less file after my components file. e.g.

Files

• global.less - main less file
• variables.less - contains all variables
• component.less - contains less code and default variables

Inside the global.less file call the two files in the following order

@import "component.less";
@import "variables.less";

Inside the component.less file you can have a default variable @color: red and the following css

body {
  background-color: @color
}

If you compile the previous code, the body will have a background color of red - as it has used the default variable in the component file.

Inside the variables.less file you can override the variable @color: blue

Now when the less files get compiled, the background color of the body tag will be blue, not red - redeclaring the variable @color inside the variables.less file overrides the default @color variable in the components.less file