31–40 of 70 posts
/* JS */ var styles = getComputedStyle(document.documentElement); var value = String(styles.getPropertyValue('--primary-color')).trim(); // value = 'red'
Rather than calling '--primary-color', you should really be able to call 'color' which points to the variable and will still return red. Otherwise you'll have to know the name of each variable being used, which is much more difficult than knowing the property.
I'm not a fan of this... /* JS */ var styles = getComputedStyle(document.documentElement); var value = String(styles.getPropertyValue('--primary-color')).trim(); // value = 'red' Rather than calling '--primary-color', you should really be able to call 'color' which points to the variable and will still return red. Otherwise you'll have to know the name of each variable being used, which is much more difficult than kn…
So of course you have to know the name of the variables, they're an API for your CSS.
For those commenting about SASS having this forever etc, note that this goes a step further: :root { --color: blue; } div { --color: green; } #alert { --color: red; } * { color: var(--color); } You can't accomplish that with SASS today. More info [0]. In fact, this feature isn't even covered with cssnext: The current transformation for custom properties aims to provide a future-proof way of using a limited subset (to…
Don't forget that CSS Variables can also be used within media queries.
Earlier quoted context omitted.
I think a lot of people agree with you but there is a reason: http://www.xanthir.com/blog/b4KT0
Stupid decision, the should have used $foo (dollar sign for variables) like in Perl and PHP. It remind me decisions of standards based on XML (XLST, XML-Schema, RDF, etc).
I've wondered for years why we're using pre-processing to get variables into CSS. Given that there hasn't been a commonly advocated workflow that didn't include some sort of CSS processor (like LESS or SASS) in about a decade, it seems like somebody working on the standards would have realized that CSS needed variables, at the very least. So, it's cool that it's coming, though it's taken a lot longer than I reckon it…
The CSS team has people like this, who no longer make websites: https://www.w3.org/People/Bos/CSS-variables Thus they're disconnected from current web developers. Meanwhile Smashing says something like 77% of audience uses SASS.
I'm going to use these to allow changing the appearance of my app, which has a Windows 95-style UI. 95 has many customisable values that determine how the UI looks (fonts, font sizes, font styles, foreground and background colours, UI element sizes, etc.) that it stores in certain registry keys and that the user can change from the Display control panel applet. In my app, I'll be using CSS variables in place of registry keys.
I'm not a fan of this... /* JS */ var styles = getComputedStyle(document.documentElement); var value = String(styles.getPropertyValue('--primary-color')).trim(); // value = 'red' Rather than calling '--primary-color', you should really be able to call 'color' which points to the variable and will still return red. Otherwise you'll have to know the name of each variable being used, which is much more difficult than kn…
color: var(--primary-color);
let value = styles['color']; // 'red'I'm not a fan of this... /* JS */ var styles = getComputedStyle(document.documentElement); var value = String(styles.getPropertyValue('--primary-color')).trim(); // value = 'red' Rather than calling '--primary-color', you should really be able to call 'color' which points to the variable and will still return red. Otherwise you'll have to know the name of each variable being used, which is much more difficult than kn…
They're already enabled in Firefox, and they'll also be supported in the next version of Safari. I'm going to use these to allow changing the appearance of my app, which has a Windows 95-style UI. 95 has many customisable values that determine how the UI looks (fonts, font sizes, font styles, foreground and background colours, UI element sizes, etc.) that it stores in certain registry keys and that the user can chang…
Just add native support for Sass and call it a day.
SASS encourage developers to build long chains of selectors and it makes them brittle and non-reusable.
IMO part of the problem is that nested LESS/SASS looks just enough like JSON to mislead inexperienced devs, who often try to treat the nested structure as an object, rather than thinking of it as a string-builder.
It invariably ends up creating huge swarths of pointless specificity and stylesheet bloat.