Override LESS variables

问题:

I have the following stack:

1. Symfony2
2. Twig with lessphp filter installed.
3. Twitter Boostrap

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?

回答1:

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 ;)

回答2:

This is happening because you override the variable after it's been used to define all the Bootstrap styles.

I solve this problem this way:

1. Create my own main.less that imports my own bootstrap.less.
2. My own bootstrap.less is just the Bootstrap's bootstrap.less file copied over to my own folder with import paths changed accordingly, but with one exception: it imports by own variables.less instead of the Bootstrap's one.
3. My own variables.less imports the Bootstrap's variables.less and then overrides the ones I need.