Re: [css-variables] Using $foo as the syntax for variables

I would like to advocate that it is worth considering _not_ putting $
on the property side for assignment.  Currently:


    :root{  $bg: red;  }
    .blah{  background-color: $bg;  }

As I said earlier, I actually kind of like it as a reference mechanism
for the simple case for several reasons, not the least of which is
that it is actually a pretty standard metaphor used in languages and
templating languages that a whole lot of Web developers and designers
are familiar with. The flip side is, assignment usually uses a special
keyword.  Maybe that isn't the shortest syntax that's possible, but
it's familiar and not very cumbersome.  It also "feels" more like CSS.
 Let me explain...

Keep in mind, I'm not talking about how it is processed, or how the
browser handles it,  but now with CSS' modules you have something
like:

    [module]-[property]:   value;

and shorthands are are generally just:

    [module]:  [value...];

That's a nice, simple and _extremely_ easily teachable model.  If
there are exceptions, they are few, and I think Lea suggested recently
that it's best to document a rule and note the few exceptions going
forward.  Given all of this, I find:

    :root{  var-bg: red;  }
    .blah{  background-color: $bg;  }

in the same easy/teachable/conforming to the familiar categories as
the rest of CSS.  It lets you think of "var" as a module with user
definable properties, it's a lot like data-* which inspired a lot of
this.

It's just my opinion, but I'm curious what anyone has to say about it.

-Brian



On Thu, May 24, 2012 at 1:06 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> On Thu, May 24, 2012 at 12:29 AM, Florian Rivoal <florianr@opera.com> wrote:
>> On Wed, 23 May 2012 19:32:50 +0200, Tab Atkins Jr. <jackalmage@gmail.com>
>> wrote:
>>> In the new syntax, it would look something like this:
>>> color: $bar //normal
>>> color: default-var($bar, red) // default value
>>> color: parent-var($bar) // bar from the parent
>>> color: parent-var($bar, red) // bar from the parent, with a default value
>>
>>
>> If we go with $ (which I still think we shouldn't), I think the above should
>> be written like this instead:
>>
>> color: $bar //normal
>> color: default-var(bar, red) // default value
>>
>> color: parent-var(bar) // bar from the parent
>> color: parent-var(bar, red) // bar from the parent, with a default value
>>
>> Keeping the $ within the function, seems to imply that you want to expand
>> the variable first, and then apply the function, giving the following
>> behavior:
>>
>> ul {
>>  $foo: red;
>>  $bar: green;
>> }
>> li {
>>  $foo: bar;
>>  $bar: blue;
>>  $background-color: parent-var($foo); /* you get green */
>> }
>>
>> Also, having the following two be equivalent
>>  color: $bar;
>>  color: var(bar);
>> Makes it possible to have multiple levels of indirection. Which you can't
>> have with $, unless you want to allow this:
>>  color: $$bar;
>
> As much as possible, I prefer to have the syntax be consistent.
> Having to remember that you use the $ in some circumstances but not
> others is an annoying mental step.  In other words, the $ is *not*
> just a disambiguator, it's actually part of the name.
>
> I don't think multiple indirection has a use-case right now.  If it
> ends up being useful, we can figure it out then; there are several
> syntax possibilities that are compatible with my current proposal.
>
> ~TJ
>

Received on Thursday, 24 May 2012 19:53:33 UTC