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

I think we have to be careful with the naming of the expression, independent of how it's actually implemented. I like the approach of the @if-var but I really don't like the naming, as we don't know if we may expect constants or anything other than variables in CSS in the near or distant future.

Thinking about it I'd like to have a universally `@if `that could be used with all types of values not only with custom properties. That way we could use it with already existing stuff like` env()` and `var()`.

e.g.

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

.my-input {
 @if(env(safe-area-inset-left) = 20) {
  border-radius: 10px;
 }
}
```

Thought even further it would be possible to redefine already existing properties. Like _background_ kinda did for _background-color_. Imagine exposing the screen width or anything to the user agent with like `env(width)`.

That way it would be possible to combine conditions of each kind and even write media queries as `@if `conditions.

e.g.

```
.my-input {
 @if (env(width) > 768) {
  border-radius: 10px;
 }
}

.my-input {
 @if (env(width) > 768) and (var(--pill) = on) {
  border-radius: 999px;
 }
}
```


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


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

Received on Tuesday, 3 November 2020 15:01:00 UTC