Feed
Egor Kloos
webhead
Nice writeup, though from what I see I would say @apply resembles more as SASS @include and placeholders than Mixins.
This proposal was killed off years ago, in favor of the ::part() selector - which doesn't solve any of the same problems, at all. Go figure.
Even if you can't pass an argument, this is a big step forward. For all the CSS frameworks, where you'd do something like <p class="grid-1 col-m bg-2 wd3 pd-m fs-1"> and the semantics go out of the window - with @apply I can use semantic class names such as <p class="important"> and then map .important to all the CSS framework visual classes in the stylesheet.
Presumably I could do that without needing a pre-processor, keeping a lean workflow and preserving ability to modify the stylesheet directly from Chrome Devtools.
Your first 'catch' example only highlights the fact that you can't pass an argument. You can do something like this by utilising the ability to scope your variables to a particular selector and toggle opacity that way. Values like 'inherit' and 'unset' can do wonders. This is why I try to avoid hardcoding values inside the mixins.
The real benefit of CSS variables and the apply rule is that you can alter them on the fly. Your loaded code becomes concise, less bloated by duplication and you can also lazyload variables to alter just about anything. Pre-processors can't do any of that.
Now, I wouldn't necessarily do away with Sass or LESS altogether. Loops are stil pretty nice to have. :)