Re: complex uses for variables in css

well, I tried it in both chrome(canary) and Firefox and it did not work!

On Tue, Mar 1, 2016 at 10:40 AM, Xidorn Quan <quanxunzhen@gmail.com> wrote:

> On Tue, Mar 1, 2016 at 9:27 PM, Felipe Nascimento de Moura
> <felipenmoura@gmail.com> wrote:
> > Hello.
> >
> > I have been playing around with css classes and found some situations.
> > If there is already something thought about these, please let me know.
> >
> > ' ' ' css
> >
> > .parent-div {
> >   --size: 50px;
> >   min-width: var(--size);
> >   min-height: var(--size);
> > }
> >
> > .parent-div .child {
> >     width: var(--size);
> > }
> >
> > ' ' '
> >
> > This does not work. But I believe it would make sense if children from
> the
> > element could use its variable.
>
> It should work, why not? It works for me on Firefox and Chrome at least.
>
> > Or perhaps, it's pseudo elements:
> >
> > ' ' ' css
> >
> > .parent-div {
> >   --size: 50px;
> >   min-width: var(--size);
> >   min-height: var(--size);
> > }
> >
> > .parent-div:after {
> >   content: "";
> >   width: var(--size);
> > }
> >
> > ' ' '
>
> It works, too.
>
> > By itself, it doesn't look so useful, but when we mix it with ' calc()':
> >
> > ' ' ' css
> >
> > :root {
> >   --size: 150px;
> > }
> >
> > .parent {
> >   --cur-size: calc(--var(size)/2);
> >   /* ... */
> > }
> >
> > .parent .child {
> >   width: --cur-size;
> > }
> >
> > ' ' '
>
> This certainly works as well.
>
> All the examples you wrote here are designed (and have already
> implemented) to work. Why do you think they do not?
>
> - 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!