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

Question

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

@include $mixin-name;

这似乎并不那么困难......

我见过有几个人想提到这个.这张票(http://dev.vaadin.com/ticket/9546)说"固定",我认为这意味着在Sass 3.2中这是可能的,但是来自Google网上论坛上Sass小组的评论似乎暗示:http ://goo.gl/HtdHu

我看到他们在说什么,似乎很多人在询问它可以很容易地以另一种方式解决他们的问题.

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

CSS动画

我已经创建了一个mixin,@keyframes以便我可以调用@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;
    }
}

哪个好极了!但是,如果我transform在其中一个关键帧状态中使用Compass :

@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,但是当我要做的事情只是声明与关键帧和官方相同的前缀时,我必须声明所有的前缀,例如:

@-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;
    }
}

等等...

Mixin问题

所以,我已经创建了一个mixin @include experimental-value,但我不能自动化它,因为

@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完全按照keyframesmixin所做的那样做,除了不是盲目地包含@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在那个动画中.
• 我希望正确的前缀transform内部正确加上前缀@keyframes

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

谢谢!

Answer 1

查看Bourbon（相关代码和文档），非常棒。