Re: complex uses for variables in css

that totally makes sense! Thanks. By the way...
it is impossible to use it in `content`, like so

```css
:root{
  --size: 10px;
}

.label::after {
  content: var(--size);
  /* ... */
}
```

Maybe that could be something useful too.

Thanks.



On Tue, Mar 1, 2016 at 11: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.
>
> - Xidorn
>



-- 
*Felipe N. Moura*
Senior Web Developer and System Analyst.

Website:  http://felipenmoura.com
Twitter:    @felipenmoura <http://twitter.com/felipenmoura>
LinkedIn: http://goo.gl/qGmq

Meet some of my projects:
BrazilJS Conference <http://braziljs.com.br/>  |  BrazilJS Foundation
<http://braziljs.org>
---------------------------------
*Changing  the  world*  is the least I expect from  myself!