- From: Christoph Päper via GitHub <sysbot+gh@w3.org>
- Date: Sun, 19 Feb 2023 08:23:46 +0000
- To: public-css-archive@w3.org
> you would use natural indices:
>
> ```css
> :root {
> --small: 1;
> --regular: 2;
> --large: 3;
> }
> my-button {
> --size: var(--small);
> }
> button {
> padding: nth-value(
> var(--size, var(--regular));
> /*small*/ 4px 8px;
> /*regular*/ 8px 16px;
> /*large*/ 12px 24px
> );
> }
> ```
With _predefined readable indices_, this could look something like this:
~~~~ css
my-button {
--size: small;
}
button {
padding: choose(
var(--size, medium);
small: 4px 8px;
medium: 8px 16px;
large: 12px 24px
);
}
~~~~
or even like this:
~~~~ css
my-button {
--size: small;
}
button {
padding: choose(
var(--size, medium);
4px 8px;
8px 16px;
12px 24px
);
}
~~~~
## Example predefined indices
| Numerical index | Size | Shirt | Screen |
| --- | --- | --- | --- |
| -2 | `tiny` | `XS` | ` watch` |
| -1 | `small` | `S`, `SM` | ` mobile` |
| 0 | `medium` | `M`, `MD` | ` tablet` |
| 1 | `large` | `L`, `LG` | ` laptop` |
| 2 | `huge` | `XL` | ` desktop` |
--
GitHub Notification of comment by Crissov
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7273#issuecomment-1435924125 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Sunday, 19 February 2023 08:23:48 UTC