0

I'm searching for a possibility to change the variable in case of an id. I've seen following post about this topic but when I compile the Less files I get the error message, that the variable isn't defined.

.colorDefs(@color) {
  @HoverActiveBg: @color;
}
body#theme1 {
  .colorDefs(@brand-info);
}
body#theme2 {
  .colorDefs(@brand-warning);
}
body#theme3 {
  .colorDefs(@brand-success);
}

...

.nav-pills:active, .nav-justified:active,
.nav-pills:hover, .nav-justified:hover,
.nav-pills:focus, .nav-justified:focus {
 background-color: @HoverActiveBg;
}

Do you have a working solution for this?

Community
  • 1
  • 1
andi-g
  • 39
  • 7
  • 1
    When you call `.colorDefs` mixin inside `body#theme1` ruleset, the variable it exposes is in that ruleset scope only (Less scope - not HTML, thus it will have no effect on any code outside that particular `body#theme1` block, whether or not that outside code applies to HTML descendants of `body#theme1`). In general, it's important to realize that Less is compiled to CSS code, and at the time of compilation the compiler knows nothing of your HTML. Thus "change the variable in case of an (HTML element) id" is simply impossible. – seven-phases-max Apr 10 '16 at 16:36
  • 1
    So you need to re-consider your approach (it's better to ask *what* you're trying to get instead of *how* you think you could get it). E.g. the code in the linked topic will work only if you repeat *all* of your theme depended code *inside each* of your `body#theme*` blocks, which is totally weird. For a practical "multiple theme in single CSS output" stuff see for example http://stackoverflow.com/questions/23551080. – seven-phases-max Apr 10 '16 at 16:48
  • THX for your coments. I will copy the less data and produce 3 seperate css files. To have all in one file would be easier to change things wich are the same in all themes. @seven-phases-max – andi-g Apr 11 '16 at 18:02

0 Answers0