W3C home > Mailing lists > Public > public-css-archive@w3.org > November 2020

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

From: Quentin via GitHub <sysbot+gh@w3.org>
Date: Tue, 03 Nov 2020 15:00:58 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-721181477-1604415657-sysbot+gh@w3.org>
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

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:22 UTC