[csswg-drafts] [css-mixins] Are mixins inside a nested structure aware of its parents? (#12016)

felix-bohlin has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-mixins] Are mixins inside a nested structure aware of its parents? ==
Hi ya'll, somewhat confusing title - let me explain! 😄 

Let's say I have this code:

```
button {
   /* 
    .....
   */

   /* Cool effect */
    background-color: steelblue;

    &:where(:not([disabled])) {
      &:where(:not(:active):hover) {
         background-color: tomato;
      }

      &:where(:hover:active) {
        background-color: aquamarine;
      }
    }
  }
}
```

In this case it could be neat and cool if I could mixin this out like this:

```
@mixin --cool-effect {
  background-color: steelblue;
  
      &:where(:not([disabled])) {
        &:where(:not(:active):hover) {
           background-color: tomato;
        }
  
        &:where(:hover:active) {
          background-color: aquamarine;
        }
      }
    }
}
```

and use it:

```
button {
  @apply --cool-effect;
}
```

Will this even possible?

Take care, have a nice day! :)  


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12016 using your GitHub account


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

Received on Friday, 28 March 2025 07:40:20 UTC