4 ms·

Please note that the final syntax for CSS Variables changed recently, so in Firefox 31 and later, where the feature is enabled by default, you declare variables

by heycam 12y ago

Please note that the final syntax for CSS Variables changed recently, so in Firefox 31 and later, where the feature is enabled by default, you declare variables like this: :root { --spacing: 16px; } and reference them like this: body { padding: var(--spacing); }

reimersjan 12y ago
thanks for the hint. i will update my demo asap
userbinator 12y ago
I think this is the latest version, and it does show "--" syntax - it's still a work in progress though: http://dev.w3.org/csswg/css-variables/ http://dev.w3.org/csswg/css-variables/
kijin 12y ago
Who comes up with these weird syntaxes? First it was var-foo, now it's --foo. What's next, \foo? "--" is almost universally used as a decrementing operator, and it's also a common prefix for verbose shell options. Just because you're now working with a different language doesn't mean that you are free to repurpose other languages' operators for entirely unrelated purposes. It's just a recipe for confusion, not to mention it's ugly. I thought I'd seen the worst when PHP picked backslash as the namespace separator. Now it's just getting crazy. Why couldn't they just pick a normal sigil that everyone already understands, like the dollar sign?
- heycam 12y ago
  As pornel pointed out, CSS Variables are really custom properties that cascade and inherit just like regular properties. Since "$" is used by CSS preprocessors for variables that work in a different way, I think Tab felt that it would cause too much confusion to use the same symbol. The set of remaining ASCII non-alphabetic characters that CSS doesn't use is pretty small too; perhaps "$" is slated for use by some other feature. There's also a desire in the WG to have a consistent naming scheme for custom CSS things, including custom media queries, custom pseudo-classes to use in selectors, etc. "--" is something that doesn't scream "variables" and so would be usable for those other things.
  - parallelist 12y ago
    > Since "$" is used by CSS preprocessors for variables that work in a different way A complete perversion of priorities. CSS generator languages change and go in and out of fashion all the time but CSS itself will be around for a very long time. They should make the best decision for the future of CSS. Generator languages are inevitably going to need to change to take advantage of any new feature anyway.
    - kijin 12y ago
      I agree. The people who develop web standards nowadays seem to have a curious aversion to existing implementations. First they rejected WebSQL because it was based on SQLite. And now they can't use the dollar sign because it's used in Sass? Is this just a bad case of NIH syndrome, or is there something more?
- zoul 12y ago
  You can’t simply pick a syntax. You have to choose something that plays well with older CSS parsers.
  - nawitus 12y ago
    You can break older parses if you just wait long enough..
- ape4 12y ago
  I agree, that is terrible. In html we already have comments with 
  - epidemian 12y ago
    -- is also the inline comment syntax for various programming languages (http://en.wikipedia.org/wiki/Comparison_of_programming_languages_%28syntax%29#Comments http://en.wikipedia.org/wiki/Comparison_of_programming_langu...)

by heycam 12y ago

reimersjan 12y ago

thanks for the hint. i will update my demo asap

userbinator 12y ago

I think this is the latest version, and it does show "--" syntax - it's still a work in progress though: http://dev.w3.org/csswg/css-variables/ http://dev.w3.org/csswg/css-variables/

kijin 12y ago

Who comes up with these weird syntaxes? First it was var-foo, now it's --foo. What's next, \foo? "--" is almost universally used as a decrementing operator, and it's also a common prefix for verbose shell options. Just because you're now working with a different language doesn't mean that you are free to repurpose other languages' operators for entirely unrelated purposes. It's just a recipe for confusion, not to mention it's ugly. I thought I'd seen the worst when PHP picked backslash as the namespace separator. Now it's just getting crazy. Why couldn't they just pick a normal sigil that everyone already understands, like the dollar sign?

heycam 12y ago
As pornel pointed out, CSS Variables are really custom properties that cascade and inherit just like regular properties. Since "$" is used by CSS preprocessors for variables that work in a different way, I think Tab felt that it would cause too much confusion to use the same symbol. The set of remaining ASCII non-alphabetic characters that CSS doesn't use is pretty small too; perhaps "$" is slated for use by some other feature. There's also a desire in the WG to have a consistent naming scheme for custom CSS things, including custom media queries, custom pseudo-classes to use in selectors, etc. "--" is something that doesn't scream "variables" and so would be usable for those other things.
- parallelist 12y ago
  > Since "$" is used by CSS preprocessors for variables that work in a different way A complete perversion of priorities. CSS generator languages change and go in and out of fashion all the time but CSS itself will be around for a very long time. They should make the best decision for the future of CSS. Generator languages are inevitably going to need to change to take advantage of any new feature anyway.
  - kijin 12y ago
    I agree. The people who develop web standards nowadays seem to have a curious aversion to existing implementations. First they rejected WebSQL because it was based on SQLite. And now they can't use the dollar sign because it's used in Sass? Is this just a bad case of NIH syndrome, or is there something more?
zoul 12y ago
You can’t simply pick a syntax. You have to choose something that plays well with older CSS parsers.
- nawitus 12y ago
  You can break older parses if you just wait long enough..
ape4 12y ago
I agree, that is terrible. In html we already have comments with 
- epidemian 12y ago
  -- is also the inline comment syntax for various programming languages (http://en.wikipedia.org/wiki/Comparison_of_programming_languages_%28syntax%29#Comments http://en.wikipedia.org/wiki/Comparison_of_programming_langu...)