如何使SASS Mixin在基本级别上声明一个非巢选择器

Question

对不起问题上的怪异语言，但我不知道如何更好地描述它。我希望这个示例清楚我想要什么：

scss-syntax

.my-smug-selector {
    @include my-smug-mixin(30px);
}

所需的CSS-OUTPUT

.my-smug-selector{
   // some styles
}
.another-smug-selector-on-base-lvl{
    // some other styles 
}
.smug-non-nested-selector{
    // some other styles 
} 

我一般对此感兴趣，但是要解释为什么在世界上我想这样做：我想定义一个密钥帧动画，该动画被指定的选择器使用，例如：

scss-syntax

.my-smug-selector {
    @include my-smug-mixin($vars);
}

所需的CSS-OUTPUT

.my-smug-selector{
    animation: most-smugish-animation 5s;
}
@keyframes most-smugish-animation {
    from {background:red;}
    to {background:yellow;}
}

Answer 1

带有SASS 3.3（目前仍在开发中），您可以这样写：

@mixin smugmation() {
    animation: most-smugish-animation 5s;
    @at-root {
        @keyframes most-smugish-animation {
            from {background:red;}
            to {background:yellow;}
        }
    }
}
.my-smug-selector {
    @include smugmation;
}

否则，您必须将选择器的名称作为参数传递给Mixin：

@mixin smugmation($sel) {
    #{$sel} {
        animation: most-smugish-animation 5s;
    }
    @keyframes most-smugish-animation {
        from {background:red;}
        to {background:yellow;}
    }
}
@include smugmation('.my-smug-selector');