- 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>
> 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