Dynamically change a variable based on class name

Question

Assume I have something like this:

.object {
  $primary-color: blue;
  h1 {
    font-size: 40px;
    color: $primary-color; 
  }
  p {
    font-size: 20px;
    color: $primary-color; 
  }
}

Now I'll be having a blue object. But let's say I want to make the same object but in a red color, it might be intuitive to write

.object red {
  $primary-color: red;
}

and expect all the $primary-color to change to red, but this is not valid in SCSS. What I have to write is:

.object red {
  $primary-color: red;
  h1 { color: $primary-color; }
  p { color: $primary-color; }
}

If I do it this way, I can still keep the 40px font size in h1 and 20px in p and will change all colors to red. However, once my code gets bigger, this will become harder and harder to maintain.

Does SCSS provide any tool to make this task more modular and maintainable?

Answer 1

For sure SCSS provide such function but you can also do it with CSS using CSS variables:

.object h1 {
  font-size: 40px;
  color: var(--p, blue);
}

.object p {
  font-size: 20px;
  color: var(--p, blue);
}
.red {
  --p:red;
}
.other-color {
  --p:rgb(15,185,120);
}

<div class="object">
<h1>Blue title</h1>
<p>blue text</p>
</div>
<div class="object red">
<h1>red title</h1>
<p>red text</p>
</div>
<div class="object other-color">
<h1>red title</h1>
<p>red text</p>
</div>