5 replies

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.

KP-C

Kevin Powell - Community•3y ago•

5 replies

Woutyboy3

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.

SCSS variables dependent on extra class

Similar Threads

SCSS variables dependent on extra class

Similar Threads

Similar Threads

Similar Threads