W3C home > Mailing lists > Public > www-style@w3.org > March 2016

Re: complex uses for variables in css

From: Xidorn Quan <quanxunzhen@gmail.com>
Date: Tue, 1 Mar 2016 21:40:47 +0800
Message-ID: <CAMdq69-D1ZtGF5Ukisv4PvpNg6X4p0k0xsZ+zBNfiSTi7px-kA@mail.gmail.com>
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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:01 UTC