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