CODEWITHSUNDEEP
csscss-variables
Bruno Wego
Bruno Wego

Reputation: 2450

CSS variable inherit from same name

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?

Upvotes: 2

Views: 559

Answers (1)

Wayne Smith
Wayne Smith

Reputation: 4868

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

Upvotes: 2

Related Questions