complex uses for variables in css

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.
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);
}

' ' '

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 way, if in a given moment, an element was moved via JavaScript into
another element(with appendChild, for example), it would automatically
follow the rules for that new place, where it is gone.

It would also help keeping things proportional from up to down on the tree.

Another interesting use would treat such variables as pseudo-rem.
So, if I have a component made of many elements, just by placing it
anywhere in the page, I would be able to use that variable, not interfering
with other elements outside this component of mine,

Let me know what you think about that.

Regards.









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

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

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