在 Sass 中包括使用变量作为名称的 mixins

Question

我正在尝试使用变量作为名称来调用 mixin，如下所示：

@include $mixin-name;

这似乎并不难......

我在网上看到一些人提到想要这样做。这张票 (http://dev.vaadin.com/ticket/9546) 上写着“已修复”，我认为这意味着在 Sass 3.2 中它是可能的，但来自 Google Groups 上的 Sass 小组的这条评论似乎另有说明：http://goo.gl/HtdHu

我明白他们在说什么，似乎很多提出问题的人可以很容易地以另一种方式解决他们的问题。

不过，我想不出另一种方法来解决我的问题，所以让我解释一下，也许有人可能会有一两个想法？

CSS 动画

我为@keyframes 创建了一个mixin，这样我就可以调用@include animation(); 并获取前缀和官方@keyframes 的完整列表

@include keyframes(reveal) {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

给我：

@-webkit-keyframes reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-moz-keyframes reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-ms-keyframes reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-o-keyframes reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

这太棒了！但如果我在关键帧状态之一中使用 Compass transform：

@include keyframes(round) {
    from {
        @include transform(rotateZ(-145deg));
        opacity: 1;
    }
    to {
        @include transform(rotateZ(-45deg));
        opacity: 0.5;
    }
}

然后我最终得到类似的东西：

@-webkit-keyframes round {
    from {
        -webkit-transform: rotateZ(-145deg);
        -moz-transform: rotateZ(-145deg);
        -ms-transform: rotateZ(-145deg);
        -o-transform: rotateZ(-145deg);
        transform: rotateZ(-145deg);
        opacity: 1;
    }
    to {
        -webkit-transform: rotateZ(-45deg);
        -moz-transform: rotateZ(-45deg);
        -ms-transform: rotateZ(-45deg);
        -o-transform: rotateZ(-45deg);
        transform: rotateZ(-45deg);
        opacity: 0.5;
    }
}

等等……

前缀内的前缀

所以，我知道这是迂腐的，但我声明 -webkit-animation 真的很烦人，但是当我想要做的只是声明与关键帧和官方，eg:

@-webkit-keyframes round {
    from {
        -webkit-transform: rotateZ(-145deg);
        transform: rotateZ(-145deg);
        opacity: 1;
    }
    to {
        -webkit-transform: rotateZ(-45deg);
        transform: rotateZ(-45deg);
        opacity: 0.5;
    }
}

@-moz-keyframes round {
    from {
        -moz-transform: rotateZ(-145deg);
        transform: rotateZ(-145deg);
        opacity: 1;
    }
    to {
        -moz-transform: rotateZ(-45deg);
        transform: rotateZ(-45deg);
        opacity: 0.5;
    }
}

等等……

混合问题

所以，我使用 @include experimental-value 创建了一个 mixin，但我无法充分自动化它，因为

@function browser-is-prefix($browser, $prefix) {
    @if $browser == $prefix {
        @return true;
    } @else {
        @return false;
    }
}

@mixin transform-prefix($transform, $browser) {
    @include experimental-value(transform, $transform,
        browser-is-prefix($browser, -moz),
        browser-is-prefix($browser, -webkit),
        browser-is-prefix($browser, -o),
        browser-is-prefix($browser, -ms),
        false, true);
}

@mixin animation-name($browser) {
    from {
        @include transform-prefix(transform(translate(-25px,200px) scale(0.5)), $browser);
        opacity: 0;
    }
    to {
        @include transform-prefix(transform(translate(0,0) scale(0.5)), $browser);
        opacity: 1;
    }
}

致电@include animation-name(-webkit) 会很有效，并为我们提供：

@-webkit-keyframes animation-name {
    from {
        -webkit-transform: translate(-25px,200px) scale(0.5);
        transform: translate(-25px,200px) scale(0.5);
        opacity: 0;
    }
    to {
        -webkit-transform: translate(0,0) scale(0.5);
        transform: translate(0,0) scale(0.5);
        opacity: 1;
    }
}

但我不能自动化它！

为了自动化这个过程，我希望能够调用一个 mixin，比如 @include prekeyframes(animation-name); 并让 prekeyframes 完全按照上面的 keyframes mixin 所做的，除了盲目地包含 @content 之外，它将包含 mixin，并且仅根据 @keyframes 具有的前缀使用它应该使用的前缀：

@mixin prekeyframes($name) {
    $prefixes : -webkit-, -moz-, -o-, -ms-, '';
    @each $prefix in $prefixes {
        @include $name($prefix);
    }
}

这当然会引发错误。如果我插入 $name (@include #{$name}($prefix))，这仍然是个问题。

所以，我可以只使用额外的 transform 值，或者我可以手动完成所有操作，但我一直对 Sass 的灵活性印象深刻，这似乎真的限制了我...

总结：

• 我想在一个地方定义一次动画。
• 我希望能够在该动画中@include transform。
• 我想在正确前缀的@keyframes 中添加正确的前缀transform

我现在已经花了几个小时，我会继续摆弄......但如果有人有类似的经历或问题，我很想知道......

谢谢！

Answer 1

看看Bourbon（相关code和documentation），太棒了。