为什么占位符选择器@keyframes有效的 .scss

Question

我一直在纯CSS动画中使用无参数mixins，这样我的类和关键帧就不会包含一堆重复的样式，类似于以下内容：

//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();
    }
}

最近，我将那些mixin转换为占位符选择器，如下所示：

//css classes excluded for brevity, compile as expected
%btn {
    color: black;
}
%btn-hover {
    color: white;
}
@keyframes hover {
    from {
        extend %btn;
    }
    to {
        extend %btn-hover;
    }
}

这没有奏效，回想起来，为什么不行是很清楚的。让我感到困惑的是，为什么首先会编译。生成的 CSS @keyframes完全为空的块是有效的：

@keyframes hover {
}

假设我对 Sass 中扩展概念如何工作的理解是正确和完整的，那么以这种方式使用占位符选择器是没有意义的。为什么这个语法一开始是有效的？为什么我没有得到编译错误？

Answer 1

它被认为是无效的，它应该引发错误。

来自 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.

来自 Sass 3.4 的错误：

Extend directives may only be used within rules.

如果您使用的是 Sass 3.2 或更早版本，则应升级。 如果您使用的是 LibSass，除了在他们的错误跟踪器上报告问题（如果尚未存在）之外，您无能为力。