variable within :root variable not changing.
Hey, i recently tried to test out a new design system method i saw andy bell using on https://piccalil.li where a property has a base value stored in
:root with variables that can be changed from within the component using it (in this case --border-color). However my variable is not changing as intended. Am i not able to use variables this way? Though it must be possible since he's using a similar syntax (see image). I just can't quite figure out how it's working for him. I'd appreciate any help. Thanks in advance.
https://codepen.io/deerCabin/pen/QWXXjKaPiccalilli
Piccalilli - level up your front-end development skills
We are Piccalilli. A publication dedicated to providing high quality educational content to level up your front-end skills.
4 Replies
Custom properties (variables) are only available within the element where they are defined and their descendants
So, if you define
--border-color: orange; within a <p> that property value will only be available for the βpβand any element you define within it.
This means that :root or any ascendent of <p> wonβt have access to this custom property or its value.
It is much like variable scoping in JavaScript. A variable defined within a function is not available outside of that function.Ah that makes sense, perhaps I was looking at it wrong then. Thank you.
Here is a variation that works: https://codepen.io/chooking/pen/MWMMOYQ
ah i see, so the alternative is local variables in the component, thank you