如何使一个Sass mixin在基本层上声明一个非嵌套选择器？ [英] How to make a Sass mixin declare a non-nested selector on base level?

问题描述

对于奇怪的语言对这个问题很抱歉，但我不知道如何描述它更好。我希望此示例清楚地表明我想要什么：

Sorry for the weird language on the question, but I don't know how to describe it any better. I hope this example makes clear what I want:

scss语法

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

所需的css输出 b
$ b

desired css-output

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

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

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

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

I'm interested in this in general, but to explain why in the world I would want to do this: I want to have a keyframe-animation defined which gets used by the specified selector, e.g.:

scss-syntax

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

所需的css输出 b
$ b

desired css-output

.my-smug-selector{
    animation: most-smugish-animation 5s;
}

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

推荐答案

使用Sass 3.3（目前仍在开发中）可以这样写：

With Sass 3.3 (which is currently still in development), you could write it like this:

@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：

Otherwise, you'll have to pass the name of the selector as an argument to the 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在基本层上声明一个非嵌套选择器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！