I'm trying to inherit a variable called --border-radius who uses the same name:
--border-radius: 0 0 var(--border-radius) var(--border-radius);
Is there a way to do this without renaming the variable?
-
3like that it's impossible, you have a cyclic dependency, you need another nameTemani Afif– Temani Afif2018-06-14 16:03:55 +00:00Commented Jun 14, 2018 at 16:03
-
nice catch, I will work around this. @TemaniAfifBruno Wego– Bruno Wego2018-06-14 16:06:47 +00:00Commented Jun 14, 2018 at 16:06
Add a comment
|
1 Answer
Cyclic referenced CSS variables are outside of the design scope of CSS and generate a new error state called, I believe, "Invalid at computed value time," W3 reference, https://www.w3.org/TR/css-variables-1/#invalid-at-computed-value-time
CSS must be able to resolve the value at the time it is evaluating the value and cyclic references don't allow that pre-existing behavior of CSS to work. CSS then falls back to the initial value for the property.
As it is outside of CSS by design, the work around if the only way to do it is to use a cyclic reference would be javascript. However, in your case why don't you just use a 2nd variable? With an easy to read top to bottom format and maintain the ability to change values as needed.
--border-radius-value: 0;
--border-radius-values: 0 0 var(--border-radius-value) var(--border-radius-value);
Link below is for additional information only, the link is not intended to answer the question on stackoverflow because at some point it may become invalid leaving the question unanswered, but may be useful to understanding all error states which can exist with CSS variables and the fall backs to expect.
For additional information on errors and fall backs: Lea from the CSS working group discussed them in a talk recorded and posted on youtube at the 10:10 time mark. https://youtu.be/UQRSaG1hQ20?t=10m10s
