- From: Tab Atkins Jr. via GitHub <sysbot+gh@w3.org>
- Date: Tue, 16 Jan 2018 22:09:40 +0000
- To: public-css-archive@w3.org
> Hi, tabs
My name is just Tab. It's not a title or a nickname. ^_^
> But I think we still can use @apply
Yes, the user of the `@apply` rule can certainly use pseudoclasses. But the person who is *setting* the custom property can't.
Say you want to apply some styles normally, and then some different styles on `:hover` (a quite ordinary use-case). You **cannot** do this:
```
.foo { @apply --var-name; }
.foo:hover { @apply --var-name; }
```
This will just apply the exact same styles in both cases, which isn't what you want. You instead have to manually invent a separate variable, like:
```
.foo { @apply --var-name; }
.foo:hover { @apply --var-name-hover; }
```
With this, the user of your component can set their normal styles in a `--var-name: ...;` property, and their hover styles in `--var-name-hover: ...;`. But then what if they want to set `:focus` styles? Or `:active` styles? Or a combination of those? You get an explosion of variable names, because you're being forced to *reinvent* selectors using property names, which are much less powerful.
--
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1047#issuecomment-358124207 using your GitHub account
Received on Tuesday, 16 January 2018 22:09:42 UTC