Less variable based on body class - css

Question

I did a little research on this but wasn't able to find what I needed, as I probably don't understand the answers.
I need to be able to define a base color for two specific pages.
Page one uses #brand-color
Page two also uses #brand-color.
Page two has a different body class. I need to make suer that #brand-color on .page-2 is different than on page 1.
I'm not quite sure how to do this, or if it's even possible.
All of the styles are already in the sheet for page 1, I really only need to change he brand-color for it all to update on page 2, I'd prefer to do that then to go through all the css and add extra declarations and duplicates for page 2.
Is this possible?

Answer 1

I don't think this is possible, but you can do something like this:
#brand-primary: #ff0000;
body{
&.page-2{
#brand-primary: #00ff00;
.yourclass{
color: #brand-primary;
}
}
.yourclass{
color: #brand-primary;
}
}
so .yourclass has a different color on body.page-2 but this is only possible within the scope.
but in this case it probably makes more sense to define a second variable.

Answer 2

You should use mixin with changing selector order technique instead of variable.
#brand-color-1: #ff0000;
#brand-color-2: #00ff00;
.brand-color() {
color: #brand-color-1;
.page-2 & {
color: #brand-color-2;
}
}
.my-brand-header {
.brand-color();
}
will be compiled to css:
.my-brand-header {
color: #ff0000;
}
.page-2 .my-brand-header {
color: #00ff00;
}