Re: [csswg-drafts] [css-variables?] Higher level custom properties that control multiple declarations (#5624)

> @tabatkins How will nested conditions be written?
> 
> I saw this example of yours in the linked issue of course I think commas make more sense here.
> 
> ```
> margin-left: cond((50vw < 400px) 2em, (50vw < 800px) 1em, 0px);
> ```
> 
> But what if I turn the cond around? This makes it quite unreadable in my opinion especially the comma-separated list of possible values. Imagine having more than two conditions nested in each other
> 
> ```
> margin-left: cond((50vw < 400px) (50vw < 800px) 1em, 0px, 2em);
> ```
> 
> Or will it be possible to do smth like this to increase readability? Should be, correct?
> 
> ```
> margin-left: cond((50vw < 400px) ((50vw < 800px) 1em, 0px), 2em);
> ```

I'm not @tabatkins but hopefully your question is directed to the group and not specifically towards Tab?

Parenthesizing the conditional like that makes for a very hard to read syntax any way you order these.
I would argue that a comma-separated three argument function is the way to go:

```
margin-left: if(50vw < 400px, 2em, if(50vw < 800px, 1em, 0px));
```

which I believe is more readable than any of the examples above, and more externally consistent (this is how inline conditionals work in CSS preprocessors ([Sass](https://sass-lang.com/documentation/modules#if) [Less](http://lesscss.org/functions/#logical-functions-if)), as well as [in spreadsheets](https://support.google.com/docs/answer/3093364?hl=en)).

> 
> But how about the at-rule?
> 
> ```
> my-input {
>   border-radius: 0;
>   @if (var(--pill) = on) {
>     @if (var(--half) = on) {
>       border-radius: 10px;
>     }
>     border-radius: 999px
>    }
> }
> ```


Nested `@if` rules definitely need to be allowed and desugar via inline conditionals using `and`. However, your example raises an interesting point: `border-radius: 999px` comes after the `@if (var(--half) = on)`, so it would be reasonable to override `border-radius` regardless of the value of `var(--half)` and desugar to:

```css
my-input {
 border-radius: if(var(--pill) = on, 999px, 0);
}
```

I think what you meant to write was perhaps this:

```css
my-input {
   border-radius: 0;
   @if (var(--pill) = on) {
     border-radius: 999px;
     @if (var(--half) = on) {
       border-radius: 10px;
     }
    }
}
```

which would desugar to:

```css
my-input {
 border-radius: if(var(--pill) = on, if(var(--half) = on, 10px, 999px), 0);
}
```

-- 
GitHub Notification of comment by LeaVerou
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5624#issuecomment-744529145 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 14 December 2020 15:48:44 UTC