After some digging I assume this might not even be possible with LESS, but I'm hoping maybe either I'm wrong or you could shed some ideas how to reach the similar outcome in a different way.
I have a fairly big website with dozens of LESS files that heavily rely on colors defined in variables such as @brand-primary everywhere a color reference is required. I need to create few new pages in this layout that follow a different, seasonal, color scheme.
The obvious idea that I had was to add a new class to the body element for those pages and go from there. However, overriding each and every @brand-primary occurence with another color for that theme just doesn't appear to be a good idea and a maintainable approach.
I was hoping the local scope of variables the LESS uses would allow me to do the following:
@brand-primary: white;
body.seasonal-theme {
@brand-primary: black;
}
body.seasonal-theme {
background: @brand-primary;
}
and the @brand-primary override would be scoped to the body selector during compilation and used across all occurences of body and child selectors in each and every LESS file. This way it would be fairly easy to override the variable everywhere, granted that all LESS files would follow the same basic local scope of body.
Unforunately, this is not the case. Unless the local variable is scoped directly in the single block occurence as follows:
@brand-primary: white;
body.seasonal-theme {
@brand-primary: black;
background: @brand-primary;
}
the locally overriden variable is disregarded altogether.
Without being able to override used variables for certain conditions it appears to me I'm left with no choice but to go through each occurrence of @brand-primary and override it to something else with
body.seasonal-theme {
background: @brand-primary-seasonal;
}
and so forth. Is scoping maintained through the whole selector even possible? If not, how would you approach this task in the cleanest way?
Thanks!
