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

Re: complex uses for variables in css

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Tue, 1 Mar 2016 10:44:35 -0800
Message-ID: <CAAWBYDDiY1t5J9iQT6MnVrqLDf-NhpSZAL24pG8Onbyk84vK3A@mail.gmail.com>
To: 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
Received on Tuesday, 1 March 2016 18:45:23 UTC

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