Re: [Css Variables] Variable Declaration Blocks

On Sep 25, 2008, at 2:02 AM, David Hyatt wrote:

> @-webkit-variables { a: foo; } div { color: green; } div { color:  
> red; color: -webkit-var(a); }
>
> where "a" fails to resolve to any usable value that the div will end  
> up red and not green.  If the declaration held only one value per  
> property, then you'd end up with a green color (and I don't think  
> that's what an author would expect).

Does that still work with compound values? I would expect the  
following to produce a 6px, solid, red line.

@-webkit-variables { a: foo; } div { color: green; } div { border: 1px  
solid red; border: 6px -webkit-var(a); }


On Sep 25, 2008, at 1:33 AM, David Hyatt wrote:
> That hardly seems simpler to me.  Variables as Daniel and I  
> specified them can remain unresolved until you end up using those  
> rules in a specific medium.  This "global soup" approach is simple  
> and intuitive for authors, since the variable names always cross  
> stylesheet boundaries (without ever having to delay the parsing of a  
> sheet because another sheet hasn't loaded yet), and the last rule  
> specified in the sheet order wins.

One thing implied by Andrew's comments is that constants are not just  
"variables lite", but are useful in their own right, in a way that  
extends, not hampers, the idea of variables. But I don't see why we  
couldn't have both. AFAIK, all programming languages have variables,  
and some have constants too. So, let's say you start out with this for  
defining variables:

@define {
  mySimpleVariable: 5px;
  myComplexVariable {
      width: 5em;
      height: 5em;
  }
}

But if the author wanted it to act as a constant, where "first rule  
overrides later rules", he could add a keyword to that rule that would  
accomplish that by adding 1,000,000 to the specificity calculation:

@define constant {
  mySimpleVariable: 5px;
  myComplexVariable {
      width: 5em;
      height: 5em;
  }
}

Or, instead of a keyword, maybe just using capital letters would do  
the same trick (in programming, constants are commonly written in all  
caps):

@define {
  MY_SIMPLE_VARIABLE: 5px;
  MY_COMPLEX_VARIABLE {
      width: 5em;
      height: 5em;
  }
}