Why are placeholder selectors inside #keyframes valid .scss? - css

Question

I've been using parameterless mixins for pure CSS animations so that my classes and my keyframes don't contain a bunch of repetitive styles, something similar to the following:
//css classes excluded for brevity, compile as expected
#mixin btn() {
color: black;
}
#mixin btn-hover() {
color: white;
}
#keyframes hover {
from {
#include btn();
}
to {
#include btn-hover();
}
}
Recently I converted those mixins to placeholder selectors like so:
//css classes excluded for brevity, compile as expected
%btn {
color: black;
}
%btn-hover {
color: white;
}
#keyframes hover {
from {
extend %btn;
}
to {
extend %btn-hover;
}
}
That didn't work, and in retrospect it's perfectly clear why not. What confuses me is why this compiles in the first place. The resulting CSS is valid #keyframes block that's completely empty:
#keyframes hover {
}
Assuming my understanding of how the extend concept works in Sass is correct and complete, using placeholder selectors in this manner makes no sense. Why is this valid syntax to begin with? Why don't I get a compile error?

Answer 1

It isn't considered valid and it should raise an error.
Error from Sass 3.3:
You may not #extend an outer selector from within #keyframes.
You may only #extend selectors within the same directive.
From "#extend %btn" on line 11.
Error from Sass 3.4:
Extend directives may only be used within rules.
If you are using Sass 3.2 or older, you should upgrade. If you're using LibSass, there's not much you can do about it other than report the issue on their bug tracker if it isn't already there.