W3C home > Mailing lists > Public > www-style@w3.org > March 2016

RE: complex uses for variables in css

From: Francois Remy <frremy@microsoft.com>
Date: Tue, 1 Mar 2016 19:02:09 +0000
To: Tab Atkins Jr. <jackalmage@gmail.com>, Xidorn Quan <quanxunzhen@gmail.com>
CC: Felipe Nascimento de Moura <felipenmoura@gmail.com>, www-style <www-style@w3.org>
Message-ID: <BN3PR0301MB0883A4AF9D60F863CA2A9F64D6BB0@BN3PR0301MB0883.namprd03.prod.outlook.com>
> 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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:01 UTC