Less variables scopes/contexts

Question

My less code is something like this:

body {
  @var: white;

  &.blue { @var: blue; }
  &.red { @var: red; }
  &.abc { @var: #badass; }

  background-color: @var;
}

What I hope is, if the body has the class .abc the value of the variable @var is #badass, if you have the class .blue The value is blue and so on. But that's not what happens, the value of the variable dont change independent of their remains classes.

Answer 1

You need to create a parametric mixin for that:

.bg(@color){
  background-color:@color;
}

and then the following code will work:

body {
  .bg("white");

  &.blue{ .bg("blue");  }
  &.red { .bg("red");   }
  &.abc { .bg(#bada55); }

}

What you are doing isn't working, because you are reassigning the variable - which works perfectly, but not writing the new value to the class. (It would make absolutely no sense if LESS created new rules, every time you are just reassigning a variable.) Also, like any other programming language, LESS has scope, thus at the time it reaches background-color: @var; @var has the value white assigned to it and creates the rule accordingly. This following will work (but makes no sense of course):

body {
  @var: white;

  &.blue{ @var: blue;    background-color: @var;}
  &.red { @var: red;     background-color: @var;}
  &.abc { @var: #bada55; background-color: @var;}
  background-color: @var;
}