如何使萨斯混入声明对基本级非嵌套选择？(How to make a Sass mixin decla

对不起，关于这个问题的怪异的语言，但我不知道如何更好形容它。 我希望这个例子清楚我想要什么：

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:

随着萨斯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');

文章来源: How to make a Sass mixin declare a non-nested selector on base level?