Re: CSS variable syntax

03.04.2014, 20:33, "Tab Atkins Jr." <jackalmage@gmail.com>:
> On Thu, Apr 3, 2014 at 9:11 AM, Mark Volkmann <r.mark.volkmann@gmail.com> wrote:
>
>> I'm not familiar with what @ is being used for. Why couldn't variables start
>> with @?
>
> @ is for at-rules. CSS Syntax already allows at-rules inside of style
> rules (none are defined yet, but it's available when we extend into
> that realm, which we will definitely do)

If at-rules are allowed inside of style rules, then it's maybe time to reconsider defining variables (custom props now) via a nested at-rule:

    .example {
        @var {
            foo: #fff;
            bar: #000;
        }
    
        background: var(foo);
        color: var(bar);
    }

So any prefix like `--` is unneeded at all while variables are clearly separated from regular properties.

As a nice side effect, global (root-level) variables could be defined without need to nest them in redundant style rule with `:root` selector.

Received on Thursday, 3 April 2014 19:24:03 UTC