RE: Proposal for adding variable declaration blocks

First, let me echo Daniel's statement that I'm not sure yet if this is going
too far or not. 

But that said, as far as syntax:

For the declaration, I think I'd rather see the separate declaration block
(without the media type, allow it in an @media block instead, same for
@variables). 

However, since the existing variables proposal only defines values, and this
defines a group of property/value pairs, I'd like to see the naming
different to keep them distinct. Perhaps even going so far as to change the
name of @variables, something like:

@values { // (or perhaps "@named-values")
  headerColor: green;
  headerBackgroundColor: white;
  bigFont: 24px;
}

@property-set headers { // (or "@property-group" or "@properties" or
"@named-property"/"@named-properties")
  color: value(headerColor); // you did mean to allow variables to be used
here, right?
  background-color: value(headerBackgroundColor);
}

Using a term like "value" rather than "variable" also makes it more clear
that the only allowed usage is in a property value, as opposed to general
substitution as some might expect from a "variable".

For usage, I prefer a variation of the property approach (more like
fantasai's suggestion of a special syntax)

h1 {
  property-set(headers); // (or other function name to better match the
declaration's at-rule name)
  font-size: value(bigFont);
}

This keeps the usage pattern more consistent with the variable usage syntax.

Peter


-----Original Message-----
From: www-style-request@w3.org [mailto:www-style-request@w3.org] On Behalf
Of David Hyatt
Sent: Tuesday, July 01, 2008 3:35 PM
To: Daniel Glazman
Cc: www-style@w3.org list
Subject: Re: Proposal for adding variable declaration blocks


On Jul 1, 2008, at 5:23 PM, Daniel Glazman wrote:

> David Hyatt wrote:
>
>> (b) Make up a selector "annotation" notation
>> h1 includes headers {
>>  font-size: 24px;
>> }
>>
>> I believe (b) is the most elegant notation.
>
> I think it's the worst one. You want legacy browsers to fallback
> to 'font-size: 24px' and for legacy browsers, the rule matches
> headers elements contained in an includes element contained in
> an h1... In summary, not at all h1 { font-size: 24px; }
>
> </Daniel>

Ok sounds like the property approach is the favorite.

dave