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

【问题标题】：Why are placeholder selectors inside @keyframes valid .scss?为什么@keyframes 中的占位符选择器是有效的.scss？
【发布时间】：2014-12-31 05:08:34
【问题描述】：

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

//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 中的工作原理的理解是正确且完整的，那么以这种方式使用占位符选择器是没有意义的。为什么以这种有效的语法开头？为什么我没有收到编译错误？

【问题讨论】：

标签： css sass css-animations

【解决方案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，除了在他们的错误跟踪器上报告该问题（如果该问题尚不存在）之外，您无能为力。

【讨论】：