W3C home > Mailing lists > Public > www-style@w3.org > August 2012

Re: [css-variables] Different syntax for variable definition and use

From: Marat Tanalin | tanalin.com <mtanalin@yandex.ru>
Date: Wed, 29 Aug 2012 22:18:37 +0400
To: Tab Atkins Jr. <jackalmage@gmail.com>
Cc: Jens O. Meiert <jens@meiert.com>,"www-style@w3.org" <www-style@w3.org>
Message-Id: <78641346264317@web19d.yandex.ru>
29.08.2012, 21:20, "Tab Atkins Jr." <jackalmage@gmail.com>:
> On Wed, Aug 29, 2012 at 10:18 AM, Jens O. Meiert <jens@meiert.com> wrote:
>>>>  Why does the variable name need to be part of the declaration?
>>>  I don't understand what you mean by this.
>>  “var-foo” appears to mean the variable is called “var-foo”; but with
>>  “var(foo)”, the variable seems to be called “foo".
>>  That is exactly why I claim it is not easy to connect things, and why
>>  this particular syntax is unintuitive and hard to use.
> I think it's pretty clear: "var-foo" means you're declaring a property
> for a var named foo.  Change the - to a space, the : to an =, and
> you're practically writing JS! ^_^
>>>>  And what are, pardon me Tab, the other “‘variable-like’ things” we
>>>>  would need the “$” syntax for
>>>  I'm thinking of $ for macro-style expansion, or something along those lines.
>>  What is macro-style expansion, why do we need it, and how does it beat
>>  variables in terms of syntax? (A thread pointer would be enough,
>>  cheers :)
> Macro-style expansion is just SASS variables.

BTW, we could _start_ with global macro-variables by using global `@var` rule similar to what I've proposed in June [1]:

    @var {
        link-color: #00f;
        button-bg: #ccc;

    A {color: var(link-color); }
    BUTTON {background: var(button-bg); }

and _then_ (one day, if someone would need it) extend this by allowing to nest @var into regular rules:

    .example {
        @var {
            link-color: #0d0;

    .example A {color: var(link-color); }

and have all inheritance benefits that current CSS-variables draft has, but without confusing `var-`-prefixed syntax for variable declaring: variable name inside `@var` rule and inside `var()` function are _identical_ and thus totally intuitively connected with each other.

With this scenario, we probably would not need to separate syntaxes for variables as custom properties and variables as macros, we could use same syntax for both.

[1] http://lists.w3.org/Archives/Public/www-style/2012Jun/0060.html
Received on Wednesday, 29 August 2012 18:19:06 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:03 UTC