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 {
 $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

<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.

3 Replies

Chris Bolson•2y ago

I would recommend using CSS custom properties for this.

.button {
  --icon-color: black;
  &.red {
  --icon-color: red;
  }
  .icon {
    color: var(--icon-color);
  }
}

.button {
  --icon-color: black;
  &.red {
  --icon-color: red;
  }
  .icon {
    color: var(--icon-color);
  }
}

As far as I understand SCSS (and I am the first to admit that my knowledge of scss is somewhat limited) a SCSS variable can only have one value so, whilst you can change it, when the code is compiled it uses the latest defined value. Hopefully somebody with more scss knowledge can clarify exactly what is happening.

Kevin Powell•2y ago

So, SCSS variables all have to be compiled to actual CSS values before they reach the browser. So, when you declare .icon { color $icon-color } it can't look at whether or not that has another class on there or not, it's just grabbing the variable as it was last defined (red in this case) and using that. @Chris shows how I'd do it, even if I'm using Sass. Custom properties have big advantages of Sass ones since they are actually live variables.

Woutyboy3OP•2y ago

Thank you so much!

Gaming

Programming

SCSS variables dependent on extra class