W3C home > Mailing lists > Public > www-style@w3.org > February 2011

Re: CSS Variables

From: Alan Gresley <alan@css-class.com>
Date: Mon, 07 Feb 2011 03:43:25 +1100
Message-ID: <4D4ECFAD.1000209@css-class.com>
To: Christof Höke <csad7@t-online.de>
CC: "Tab Atkins Jr." <jackalmage@gmail.com>, www-style list <www-style@w3.org>
On 6/02/2011 10:37 PM, Christof Höke wrote:
> On 06.02.2011 01:34, Tab Atkins Jr. wrote:

>>  The syntax isn't complex. What we're going with so far is this:
>>  @var $foo red;
>>  bar {
>>  color: $foo;
>>  }

Agree with glazou regarding the $.

> ignoring the question if variables should be included in browsers, just
> regarding that syntax:
> What is wrong with the syntax proposed at
> http://disruptive-innovations.com/zoo/cssvariables/ you referred to?
> @variables {
> foo: red
> }
> bar {
> color: var(foo)
> background: var(foo) url(x.gif) no-repeat;
> }
> Chris

Firstly 'foo: red' is the same syntax for <property>: <value(s)>. 
Secondly you could have the following that is more robust.

@variables theme1 {
     color: red;
     background: blue url(y.gif) repeat;
bar {
     color: var(theme1) yellow;
     background: var(theme1) green url(x.gif) no-repeat;

And the syntax is similar or consistent to other @rules like @media, 
@page or @keyframes.

Regarding color: $foo;. How is this be parsed in a comma delimited string?

I haven't tested in Chrome but the following chokes in all browsers that 
I can test.

bar {
     background: $foo, url(z.gif);

But the following also chokes in all browsers that I can test (except 

bar {
     background: var(theme2), url(z.gif);

Since both are unrecognized and causes the whole comma delimited string 
to be dropped, I do suggest that whatever is decided is decided soon.

Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
Received on Sunday, 6 February 2011 16:45:03 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:55 UTC