Re: [css-variables] Maintain link between var declaration and use

>  Regarding the latest CSS variables draft [1], I strongly suggest to
>  find a more intuitive syntax that maintains the link between
>  variable definition and variable usage, or to present a strong
>  argument why there should not be such a link.

>  In order to align variable declaration and use the format var-* may
>  suffice, or, as has been proposed in the past, using a special
>  character to denote variables as in @var-*.
I absolutely agree. When I first heard of CSS variables I was very 
excited until I saw the syntax used for them. To me the current syntax 
looks horribly unintuitive. Besides that it seems to break with common 
CSS syntax rules. Variable definitions are not (or at least should not 
be) directly used to style an element. Instead they should be defined 
inside an @-rule.

Possible syntaxes I could imagine:

Definition
--------------------------------------------------
1. @variables rule containing variables as properties
Example:
   @variables {
     header-color: #06c;
   }

Advantages:
- All variables can be defined at one place

Disadvantages:
- No format restrictions for values


2. @var rule for defining one variable as rule
Example:
   @var header-color {
     background-color: #006;
     color: #06c;
   }

Advantages:
- Properties can be defined like in normal styling rules
- Variable can hold several properties

Disadvantages:
- Overhead when defining several variables
- A bit overhead when using variables only for single values


3. @variables rule containing variables as rules
Example:
   @variables {
     header-color {
       background-color: #006;
       color: #06c;
     }
   }

Advantages:
- Properties can be defined like in normal styling rules
- Variable can hold several properties
- Corresponds to the syntax of other @-rules like @keyframes

Disadvantages:
- A bit overhead when using variables only for single values


Usage
--------------------------------------------------
1. 'var' property
Example:
   h1 {
     var: header-color;
   }

In case several properties should be allowed in one variable, this could 
be the syntax.


2. $-syntax
Example:
   h1 {
     background-color: $header-color;
   }

According to PHP syntax variables could be preceeded by a dollar sign 
(or another special character that makes it obvious that the value is a 
variable and not a normal value).


3. var()-syntax
Example:
h1 {
     background-color: var(header-color);
   }

The syntax as it's currently suggested.

Sebastian