less.css change theme variable in case of id

Question

In my less file I define a variable theme colour as: @primaryColour: red;

But when the id of my body changes, I want to change the overall theme colour to '@primaryColour: blue;

How do I re-define this theme colour? This doesn't work:

@primaryColour: red;

body#secondTheme {
  @primaryColour: yellow;
}

That's not how it's supposed to work – Prisoner Aug 27 '13 at 09:59 — Prisoner, Aug 27 '13 at 09:59

score 0 · Accepted Answer · answered Aug 27 '13 at 09:58

0

You cannot overwrite variables in LESS (within the same scope). The documentation specifically says:

Note that variables in LESS are actually ‘constants’ in that they can only be defined once.

I suggesr you tu use something like this:

.colorDefs(@color) {
    @primaryColour: @color;
}

body#firstTheme {
  .colorDefs(red);
}
body#secondTheme {
  .colorDefs(yellow);
}

answered Aug 27 '13 at 09:58

And then I can use it for instance on a `.navbar { background-color:@primaryColour; }` ? – Remi Aug 27 '13 at 10:16
thnx for your solution. I still get an error when I use it though: `/usr/local/bin/lessc --no-color style-theme.less NameError: variable @primaryColour is undefined in ...` – Remi Aug 27 '13 at 10:27
Guess I can't only change one var in case of class/id change, to change the whole document. And need to define all instances of the color change, which is the same as in ordinary css. Anyhow, thanks for the feedback @Alessandro – Remi Aug 27 '13 at 10:44

1 Answers1