Can anyone think of a use case for this beyond what a precompiler (Sass, Less, Stylus) can do?
CSS Variables in Firefox 31 – new syntax
11–20 of 54 posts
Re: CSS Variables in Firefox 31 – new syntax
#12Earlier quoted context omitted.
Yeah, obviously they need to avoid conflicts but surely they could have found a single character to use as a prefix instead of "--", like "$" or "@". The "var()" function is just.. redundant. Or maybe I'm missing something?
Here's the discussion where they changed from "var-" to "--": http://lists.w3.org/Archives/Public/www-style/2014Mar/0261.h... And later on the justification for not using $ or @: http://lists.w3.org/Archives/Public/www-style/2014Mar/0400.h... There's also the issue that this needs to be backwards compatible with parsers that don't support the syntax, and apparently because the variables cascade that makes it harder s…
where is the discussion for using `var()` ?
The rationale for the "--" sigil matches what I'd expected, but I don't understand: why not just `name: --value` ?
Re: CSS Variables in Firefox 31 – new syntax
#13Can anyone think of a use case for this beyond what a precompiler (Sass, Less, Stylus) can do?
I think the idea is you use this rather than a precompiler.
Re: CSS Variables in Firefox 31 – new syntax
#14Can anyone think of a use case for this beyond what a precompiler (Sass, Less, Stylus) can do?
Because precompilers are sort of a disruption of the point of CSS to begin with. I know, I know, a lot of people use them, but using style sheets that require compilation pretty much defeats the purpose of separation.
Re: CSS Variables in Firefox 31 – new syntax
#15These are not like SASS variables. I think calling this variables is causing unnecessary confusion.
This feature adds custom properties. CSS had custom vendor properties like `-webkit-foo`, and now you can have your own properties with vendor == "", so it's `--foo`.
Re: CSS Variables in Firefox 31 – new syntax
#16So in this article, the author says this is not supported on chrome. But in this stack question [1], chrome is clearly using it. Is the only difference the author is discussing that now firefox uses/supports "--" instead of "var-"? [1] http://stackoverflow.com/questions/18466569/enable-experimen...
It was removed from Chrome in February. https://groups.google.com/a/chromium.org/forum/#!topic/blink...
Re: CSS Variables in Firefox 31 – new syntax
#17So in this article, the author says this is not supported on chrome. But in this stack question [1], chrome is clearly using it. Is the only difference the author is discussing that now firefox uses/supports "--" instead of "var-"? [1] http://stackoverflow.com/questions/18466569/enable-experimen...
CSS variables were recently removed from Chrome: http://stackoverflow.com/a/23518831/349353
Re: CSS Variables in Firefox 31 – new syntax
#18So in this article, the author says this is not supported on chrome. But in this stack question [1], chrome is clearly using it. Is the only difference the author is discussing that now firefox uses/supports "--" instead of "var-"? [1] http://stackoverflow.com/questions/18466569/enable-experimen...
CSS variables were recently removed from Chrome: http://stackoverflow.com/a/23518831/349353
I see, thanks for pointing that out.
Re: CSS Variables in Firefox 31 – new syntax
#19These are not like SASS variables. I think calling this variables is causing unnecessary confusion. This feature adds custom properties . CSS had custom vendor properties like `-webkit-foo`, and now you can have your own properties with vendor == "", so it's `--foo`.
I think this is just a problem of nomenclature. In CSS, a statement such as
font-color : red;
--header-bg-colour : #ff5533;
header { background-color : var(--header-bg-colour); }
Re: CSS Variables in Firefox 31 – new syntax
#20Does the W3C not have internet access to learn about existing solutions and least try to emulate the good parts?
LESS and SASS are much better about variables, what the heck were they thinking?
background-color: var(--best-gray-ever);