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

On Thu, May 24, 2012 at 10:18 PM, Sebastian Zartner
<sebastianzartner@gmx.de> wrote:
>> > Since my proposals of
>> http://lists.w3.org/Archives/Public/www-style/2012Apr/0814.html still
>> don't seem to be recognized, I post them here again
>> (though some info might already be outdated now):
>> [snip proposals]
>>
>> None of these are really workable, unfortunately.  They're all
>> variants on the older idea of global variables/macros, like what SASS
>> currently has.  Current CSS vars are scoped to elements and inherit
>> down the element-tree, which adds some decent complexity but also
>> opens up some very attractive features.  This isn't replicable with
>> anything like the old approach.
>
> Sorry, I missed the earlier discussions about CSS variables. Could you explain which "very attractive features" that would be? Currently I just see the decent complexity this approach has.
> Approaches using an @-rule would not allow to define a variable to be valid inside a specific element subtree but the variable values would still be inherited down the element tree. And their usage is a lot easier than the var- declaration inside style rules.

The main benefit is that you get a useful form of scoping "for free".
Rather than all variables being global, which goes against good
practices in every programming language I know of, they can be scoped
to a particular element and its subtree, and can be overridden.

You get some additional benefits when the syntax is extended as has
been discussed in this thread, so that you can specify default values
and refer to inherited vars.  That allows you to, for example,
accumulate a variable as you go down the tree.  I've seen this basic
technique used in an extremely hacky way with counters already.  You
can also use these to create an effect similar to, but distinct from,
the toggle() function in Values & Units (search for threads about
cycle() and background for more information about this).  Finally,
they're extremely useful as a way to provide styling hooks for Web
Components.

~TJ

Received on Friday, 25 May 2012 06:21:56 UTC