Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS Variables in Firefox 31 – new syntax

jan.rs

Post reply on HN
Print view View original

1–10 of 54 posts

Re: CSS Variables in Firefox 31 – new syntax

#3

Post by galvin »

bshimmin wrote: post #2

That new syntax is astonishingly ugly and bizarre. I'm sure it'll be a real joy to use that for anyone who's been using Sass or Less (and who doesn't, these days...).

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?

Re: CSS Variables in Firefox 31 – new syntax

#5

Post by colinramsay »

galvin wrote: post #3
bshimmin wrote: post #2

That new syntax is astonishingly ugly and bizarre. I'm sure it'll be a real joy to use that for anyone who's been using Sass or Less (and who doesn't, these days...).

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 still. I agree it's ugly though.

Re: CSS Variables in Firefox 31 – new syntax

#6

Post by bshimmin »

ibotty wrote: post #4
bshimmin wrote: post #2

That new syntax is astonishingly ugly and bizarre. I'm sure it'll be a real joy to use that for anyone who's been using Sass or Less (and who doesn't, these days...).

`--` is a comment in many languages (sql, haskell, ..).

And of course it's a decrement operator in many others! It doesn't seem at all intuitive as a sigil to use for this purpose.

Re: CSS Variables in Firefox 31 – new syntax

#7

Post by evolve2k »

colinramsay wrote: post #5
galvin wrote: post #3

Earlier 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…

From the second link in parent:

"> As far as I understand, the main reason of why Tab's original idea of using `$` has eventually been dropped was some uncertainty about its possible extensibility for being used in property _names_ besides property _values_.

The reason it got dropped is that some people (including Tab) do believe we should reserve $ for mixins and other preprocessor-like operations which may potentially be added to the language at some point. e.g. futuristic things like:

    @define apply-2d-transform(initial-scale, initial-rotation, ...) {
        ...
        my-transform-scaling: $initial-scale;
        my-transform-rotation: $initial-rotation;
        ...
        transform:
            scale(get(my-transform-scaling))
            rotate(get(my-transform-rotation))
            translate(get(my-transform-translation));
        will-change[]:
            transform;
    }

    .some-element {
        $apply-2d-transform(...);
        transition[]: transform 0.5s ease-in-out;
    }

    .some-element:hover {
        my-transform-scale: 1.1;
    }
but this syntax was just made for this example, final milage may look completely different and/or offer different features)"

Re: CSS Variables in Firefox 31 – new syntax

#9

Post by peaton »

So 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...

Post reply on HN