What are CSS variable scopes?

Can you explain what CSS variable scopes are?

Sure! CSS variable scopes determine where a CSS variable can be accessed and used within your styles.

How do global and local scopes differ in CSS variables?

Global scope means the variable is accessible throughout the entire stylesheet, while local scope restricts it to a specific selector.

Can you give me an example of using a local CSS variable?

Absolutely! You can define a variable inside a class like this: .my-class { --my-color: red; } and use it within that class.

What happens if I try to use a local variable outside its scope?

If you try to use a local variable outside its defined scope, it will not be recognized, and you'll see no effect.