Redefining CSS Variables in Different Scopes

The solution is pretty simple.

In the .square--pink class, we redefine the --color variable to the deeppink color:

Loading solution


0:00 The solution is pretty simple here. All I had to do is in the square--pink class, redefine the --color variable, and assign it the color of deeppink, and now the square is pink. Pretty straightforward, right? This CSS variable scoping is a foundational piece of our theming strategy, so I need to make sure that you're comfortable with it.