RE: complex uses for variables in css

> On Tue, Mar 1, 2016 at 6:34 AM, Xidorn Quan <quanxunzhen@gmail.com>
> wrote:
> > On Tue, Mar 1, 2016 at 10:16 PM, Felipe Nascimento de Moura
> > <felipenmoura@gmail.com> wrote:
> >> Hm, weird.
> >> In this example of mine, it is not working:
> >> http://jsbin.com/kesutoyoyo/3/edit?css,output

> >>
> >> Am I missing something here?!
> >
> > It seems to me this is because calc() can not be nested.
> >
> > Variables are stored as syntax sequence and expanded when used. So in
> > your code, for example, the line "left: var(--middle);" is expanded to
> > "left: calc(calc(150px*2)/2 - 2px);". The nested calc is not supported
> > here, so this line is dropped.
> >
> > You can, for example, do something like
> >> --cursize: (var(--size)*2);
> >> --middle: (var(--size)/2);
> >> left: calc(var(--middle));
> > which should work then.
> 
> Note that calc() *should* be nestable, per spec.  A calc() inside of a
> calc() is identical to just parentheses.
> 
> ~TJ

It does not work in any browser yet, though (at least last time I checked).
https://github.com/w3c/csswg-test/blob/master/css-values-3/calc-in-calc.html


Our team has a bug to fix this -- which I didn't file since it predates me, proof that writing w3c tests is a good way to get browsers to think about fixing their code, but not necessarily to actually fix it ;-)

Received on Tuesday, 1 March 2016 19:02:39 UTC