SCSS variables dependent on extra class

I have a class whit a variable that i would like to change depending on wich class is included.

Here is an example

.button {
 $icon-color: black;

//This is what i thought the awnser was but is not
  &.red {
   $icon-color: red;
  }

  .icon {
    color: $icon-color;
  }
}


<button class="button" ><i class="icon">home</i></button> ==> black icon
<button class="button red" ><i class="icon">home</i></button> ==> red icon


or is there a better way.

Looping over colors is not a real solutions cause the scale of the code i user is to big to easly loop over it.
Was this page helpful?