Override LESS variable in CSS selector -

i'm looking method override less variable within css selector.
example below doesn't work:

@main: #01b2bb;  body.purple{    @main: #937cb8; } #wrapper header{background-color: @main} 

i expected #937cb8 output when body have class purple.

commonly

often less, 1 have different variable files serve a different set of css (a different file) for, in case, body.purple css, @main defined globally in variable file #937cb8 (and "purple" variable file). keeps css code reduced, require 1 serve new file on class change of body.

optionally

if, however, want class distinction within single css file, better abstract code out more, keep more manageable keeping color defining within 1 mixin:

less

.setcolors() {   @main: #01b2bb; //default        .purple & {     @main: #937cb8;     .setcss();   }   .red & {     @main: #ff0000;     .setcss();   }   .blue & {     @main: #0000ff;     .setcss();   } }  #wrapper header {   .setcolors();   .setcss() {     background-color: @main;   } }  .mylistclass {   .setcolors();   .setcss() {     li {       background-color: fade(@main, .5);     }     > {       color: @main;     }   } } 

css output

.purple #wrapper header {   background-color: #937cb8; } .red #wrapper header {   background-color: #ff0000; } .blue #wrapper header {   background-color: #0000ff; } .purple .mylistclass li {   background-color: rgba(147, 124, 184, 0.005); } .purple .mylistclass > {   color: #937cb8; } .red .mylistclass li {   background-color: rgba(255, 0, 0, 0.005); } .red .mylistclass > {   color: #ff0000; } .blue .mylistclass li {   background-color: rgba(0, 0, 255, 0.005); } .blue .mylistclass > {   color: #0000ff; } 

now append color class front of using color, create css change color depending upon parent class. note expecting use color must call setcolors(); mixin, , must define changing color css within .setcss() mixin locally defined (as shown above). 1 way of getting css output various parent classes controlling color.