為什么@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跟蹤器上報告該問題（如果尚未存在）之外，您無能為力。