In such case, we can consider the fallback value of a CSS variable. Like explained in the specification we can write something like this: background:var(–color,inherit) By doing this, we tell our property (background) to use inherit in case –color is not defined. This may solve the issue but in our case it won’t be enough … Read more
Just the standard way: Get the computed styles with getComputedStyle Use getPropertyValue to get the value of the desired property getComputedStyle(element).getPropertyValue(‘–color-font-general’); Example: var style = getComputedStyle(document.body) console.log( style.getPropertyValue(‘–bar’) ) // #336699 console.log( style.getPropertyValue(‘–baz’) ) // calc(2px*2) :root { –foo:#336699; –bar:var(–foo); –baz:calc(2px*2); }
From the spec, The var() function can be used in place of any part of a value in any property on an element. The var() function can not be used as property names, selectors, or anything else besides property values. (Doing so usually produces invalid syntax, or else a value whose meaning has no connection … Read more
The new Specification introduces “relative color syntax” where you can do the following :root { –color-primary: #f00; /* any format you want here */ –color-primary-darker: hsl(from var(–color-primary) h s calc(l – 5%)); –color-primary-darkest: hsl(from var(–color-primary) h s calc(l – 10%)); } The idea is to convert the main color to hsl format and using calc() … Read more
You can use document.body.style.setProperty(‘–name’, value);: var bodyStyles = window.getComputedStyle(document.body); var fooBar = bodyStyles.getPropertyValue(‘–foo-bar’); //get document.body.style.setProperty(‘–foo-bar’, newValue);//set More Information here.
CSS supports this natively with CSS Variables. Example CSS file :root { –main-color:#06c; } #foo { color: var(–main-color); } For a working example, please see this JSFiddle (the example shows one of the CSS selectors in the fiddle has the color hard coded to blue, the other CSS selector uses CSS variables, both original and … Read more
Is there a way to validate/highlight formulas errors? You need to check to see if you aren’t breaking any rules when defining your formula. Here it is from the specification: At each operator, the types of the left and right argument are checked for these restrictions. If compatible, the type resolves as described below (the … Read more
You can’t take an existing color value and apply an alpha channel to it. Namely, you can’t take an existing hex value such as #f0f0f0, give it an alpha component and use the resulting value with another property. However, custom properties allow you to convert your hex value into an RGB triplet for use with … Read more
You can perform interpolation with most CSS functions, including rgba() (see an example here). In fact, interpolation is one of the main features of custom properties. But you cannot do this with url(), as url(var(–url)) is parsed not as a url( function token followed by var(–url) followed by a ), but a single url() token … Read more
In your case you have evaluated the –scale custom property at the root level to define the –size-* properties and then you defined the –scale again inside child elements. This will not trigger evaluation again because it was already done in an upper level. Here is a simple example to illustrate the issue: .box { … Read more