-
I knew that "cyclic" variable dependencies are Invalid: html { --one: var(--two); /*❌*/ --two: var(--one); /*❌*/ } And I knew var() resolves before inheriting: html { --two: 0; --one: var(--two); /* 0 */ } body { --two: 2em; margin: var(--one); /* still 0 */ }Permalink On twitter.com
♻️ 4 Retweets ❤️ 19 Favorites Mood +4 🙂
-
Well… *Today I Learned* that means cyclic reference is allowed/avoided when nesting & inheritance are involved: html { --one: 10px; /* 10px */ } body { --two: calc(var(--one) + 10px); /* 20px */ } main { --one: calc(var(--two) + 10px); /* 30px */ } 🤯Permalink On twitter.com
-
I still haven't found a use-case tho… I better spend the rest of my day/week on this, right?On twitter.com