css - 如何使 Sass mixin 在基层声明非嵌套选择器？

Question

很抱歉这个问题的语言很奇怪，但我不知道如何更好地描述它。我希望这个例子能清楚地说明我想要什么:

scss 语法

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

所需的 css 输出

.my-smug-selector{
   // some styles
}

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

.smug-non-nested-selector{
    // some other styles 
} 

总的来说，我对此很感兴趣，但为了解释我为什么要这样做:我想定义一个关键帧动画，它被指定的选择器使用，例如:

scss 语法

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

所需的 css 输出

.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 smugmation($sel) {
    #{$sel} {
        animation: most-smugish-animation 5s;
    }

    @keyframes most-smugish-animation {
        from {background:red;}
        to {background:yellow;}
    }
}

@include smugmation('.my-smug-selector');