Menu
I have the following stack:
In base.css i have:
// base.less
@import '/path/to/bootstrap.less'
@linkColor: 13px;
Variable name is not important at all. It can be any other variable used in bootstrap. It just doesn't get overridden. But if i put the variable into separate .less file and import it in base.less everything works as expected:
// base.less
@import '/path/to/bootstrap.less'
@import '/path/to/variables.less'
and
// variables.less
@linkColor: 13px;
Why does this work and the other not? Looked up for the docs (less/lessphp) but couldn't find anything related to this. (or i didn't know where to look).
Can someone explain why is this happening?
775
You can create a separate file called variables-overrides. less and in there you override all the variables you need. Next, you need to modify variables. less to include your overrides.
Ok! One of the above issues led to a discussion of the intended behaviour, and it turns out that overriding LESS variables is fine. Your declarations will overwrite each-other in the same scope in CSS; The same is true for LESS. Like in CSS, overriding within a scope is an intended way to use LESS.
The best way to do this is to add dynamic class on the body and change the value of @color based on the class added on the body and then compile the LESS into css. and add the class on body using javascript.
It looks like it's a bug in the lessphp compiler. Take a look at the github issue. Your workaround, to put the variable declaration into another file and also import it works just fine. Thanks by the way ;)
168
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
