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

Question

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

//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，那么除了在Bug跟踪器上报告该问题（如果尚未存在）之外，您无能为力。