How to make the default variable less sass-like! Default tag
I have a file global.less
that calls a file variables.less
and then a file component.less
.
I want to be able to set default variables inside the component file and be able to override them in the variables file.
But the component file appears after the smaller file, so the component variables by default will override the variables set in the file variables.less
.
Is there any option in Less that I can use like the Sass !default
keyword?
source to share
The solution mentioned in @ seven-phase-max is to move the variables.less file after my components file. eg.
Files
- global.less - main less file
- variables.less - contains all variables
- component.less - contains fewer code variables and by default
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 red background color - as it used the default variable in the component file.
Inside the variables.less file, you can override the variable @color: blue
Now when fewer files are compiled, the background color of the body tag will be blue instead of red - overriding a variable @color
within a file variables.less
overrides the default variable @color
in the filecomponents.less
source to share