- From: Xidorn Quan <quanxunzhen@gmail.com>
- Date: Tue, 1 Mar 2016 21:40:47 +0800
- To: Felipe Nascimento de Moura <felipenmoura@gmail.com>
- Cc: www-style <www-style@w3.org>
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
Received on Tuesday, 1 March 2016 13:41:55 UTC