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

On Wed, Aug 29, 2012 at 11:18 AM, Marat Tanalin | tanalin.com
<mtanalin@yandex.ru> wrote:
> 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); }

You're far from the first to introduce this.  Macros have been hanging
around as a proposal for more than a decade.  My own effort to
introduce variables started with them, before morphing into the
current form.


> 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

You can only do this if you artificially limit the scope of global
variables to only being usable inside of property values.  Your
proposal is identical to current CSS variables, just with a different
syntax.  Your "global" version is just CSS variables that are limited
to only being declared on the root element.

If we have global variables, if makes sense to take full advantage of
them, and let them be a full macro mechanism so that you can, for
example, substitute them into selectors and such.

~TJ

Received on Wednesday, 29 August 2012 18:32:59 UTC