Question

我一直在使用无参数mixins进行纯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，除了在错误跟踪器上报告问题（如果它还没有）之外，您可以做的事情并不多。

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

1 个答案: