Question

对不起这个问题的奇怪语言，但我不知道如何更好地描述它。我希望这个例子能说明我想要的东西：

SCSS语法

.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语法

.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');

如何使Sass mixin在基类上声明一个非嵌套选择器？

1 个答案: