7

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?

Elnur Abdurrakhimov
  • 44,533
  • 10
  • 148
  • 133
Viorel
  • 1,420
  • 1
  • 17
  • 27

2 Answers2

7

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

whiskeysierra
  • 5,030
  • 1
  • 29
  • 40
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.
Elnur Abdurrakhimov
  • 44,533
  • 10
  • 148
  • 133
  • Thanks Elnur! but I solved the problem too. My question is why this happens not how to fix it. Already know that! Your solution seems over complicated and not recommended. It seems that all the @imports are being processed into their own context and base.less that import them into a different context. Otherwise I can't explain this. – Viorel Mar 15 '13 at 14:22
  • 1
    You didn't answer to my question. You provided an alternative which is not what i was looking for. I already have the solution to fix the problem. Even so, your solution is not recommend from my standpoint of view. Really...don't think that's the proper way to extend bootstrap... Just because you are the only person who posted doesn't mean I will accept your answer which in fact is not an answer to my question. Again I asked if someone could explain why the override doesn't work in that situation and NOT how to make it work. Already know that! Period! Thanks for your time! – Viorel Mar 19 '13 at 05:11
  • That's why I wrote «or provide your own answer and accept it». ;) – Elnur Abdurrakhimov Mar 19 '13 at 11:23
  • This is actually an open issue in LessPHP as pointed out by whiskeysierra - plus your solution isn't quite future proof as you have to copy bootstrap.less again on every update. – neemzy Aug 28 '13 at 17:09