css - 为什么@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();
    }
}

最近我将这些 mixins 转换为占位符选择器，如下所示:

//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 block :

@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，除了在他们的错误跟踪器上报告问题(如果还没有)之外，您无能为力。