Hacker News Reader

Comment by micheljansen | Hacker News Reader

Coming from Less.js, the first example does not exactly fill me with joy:

    :root {
      var-header-color: #06c;
    }
    h1 { 
      background-color: var(header-color); 
    }

Compare that to Less:

    @header-color: #06c;    
    h1 { 
      background-color: @header-color;
    }

I can understand why they opted out of the @-notation in favor of something a bit more in line with existing CSS, but it just looks overly complicated to me.

View on HN

Yep, I'd be happy with this:

    $header-color: #06c;    
    h1 { 
        background-color: $header-color;
    }

Or even this:

    :vars {
        header-color: #06c;
        header-font: helvetica;
    }
    h1 { 
        font-family: $header-font;
        background-color: $header-color; 
    }

@, : and $ are already well used though.

Yeah, the name spacing part is crucial because you can do

:root { var-color: #000; }

p { var-color: #666; }

* { color: var(color) }

Yep, see issue#1 on the proposal:

"As defined here, the syntax for variable usage is different from the syntax for variable definition (i.e. var-foo for definition, var(foo) for usage). Some have suggested that the syntaxes should should match, using functional syntax in both cases. Others have suggested using a prefixed symbol instead of functional syntax (e.g. $foo) for both the property and usage."

http://www.w3.org/TR/css3-syntax/#at-rules

As I understand it, at-rules are basically directives to the CSS parser and, according to the spec, should be ignored if the parser does not recognize the identifier. Given that, the use of at-rules for variable names has always seemed, IMVHO, to break the purpose of at-rules.

Reply on news.ycombinator.com