Re: Better Variables through Custom Properties

On Mon, Oct 24, 2011 at 23:30, Tab Atkins Jr. <jackalmage@gmail.com> wrote:

> Another thought occurs to me.  Since I already want to allow variables
> referring to other variables, for use in various functions and
> whatnot, it seems like it would be incredibly useful to also allow you
> to invoke the *inherited* value of a variable.  This would allow for
> some *really* useful effects, such as building up an increasing value
> as you descend the DOM:
>
> :root {
>  data-indent: 10px;
> }
> ul {
>  data-indent: calc( parent-data(indent) + 10px );
> }
>

This is actually the default I envisioned and described for apply(). IMHO
it's more general than using the current value: it avoids circular
dependencies, allows for easy swapping of values without "helper
properties", etc.

The downside that one couldn't use the current value inside the same rule
block isn't a big drawback IMHO. Rather than

:root {
    data-foo: red;
    data-bar: linear-gradient(transparent, data(foo));
}


you'd have to duplicate 'red' in both lines, or use another,
previously-defined variable. OTOH, by using the inherited variable, one can
do:

div {
    data-foo: data(data-bar);
    data-bar: data(data-foo);
}


or even allow this to be used with non-'data' properties without causing
dependency or problems with layout:

[inverted] {
    background-color: data(color);
    color: data(background-color);
}



- Roland