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

On Wed, 23 May 2012 02:10:39 +0200, Ojan Vafai <ojan@chromium.org> wrote:

> Would someone be willing to summarize what the proposed extensions are?

I know of 2:

1) var-default(foo, default-value) which uses evaluates
to default if foo is undefined or invalid.

2) var-inherit(foo) which uses the inherited value of the variable,
rather than its current value, allowing you to write things like this:

/*nested x elements get alternating background colors*/
x {
   var-foo:blue;
   var-foo2:red;
   background:var(foo);
}
x x {
   var-foo:var-inherit(foo2);
   var-foo2:var-inherit(foo);

}

or like this:

/*the width of the border is proportional to the depth in the tree.*/
:root {
   var-foo:1px;
}
* {
   var-foo: calc(var-inherit(foo) + 1px);
   border: var(foo) solid black;
}