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
Using Chrome Canary, you can access this by viewing the element’s Computed styles and enabling the Show all filter: …
Edit for clarity: CSS custom properties with integer values can be displayed in a pseudo-element’s content property via a CSS counter. div { –variable: 123; } span:after { counter-reset: variable var(–variable); content: counter(variable); } <div>The variable is <span></span>.</div> .coordinates:before { counter-reset: x var(–x) y var(–y); content: ‘The coordinates are (‘ counter(x) ‘, ‘ counter(y) ‘).’; … Read more
As of this posting, March 2018, the only way to use negative custom properties is by multiplying it by -1 with the calc function. // Vanilla CSS .class { margin-bottom: calc(var(–margin-md) * -1); }
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
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
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
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); }
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
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