我正在尝试使用变量作为名称来调用 mixin，如下所示：
@include $mixin-name;
好像没那么难...
我在网上看到一些人提到想要这样做。这张票（http://dev.vaadin.com/ticket/9546）说“已修复”，我认为这意味着在 Sass 3.2 中这是可能的，但来自 Google Groups 上的 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;
}
}
ETC...
前缀内的前缀
所以，我知道这是迂腐的，但是我声明真的很烦人-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;
}
}
ETC...
混合问题
所以，我用@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，类似于上面的mixin 所做的事情，除了盲目地包含 the 之外，它将包含 mixin@include prekeyframes(animation-name);并且只使用它应该基于什么的前缀@keyframes 的前缀有：prekeyframeskeyframes@content
@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
我现在已经花了几个小时，我会继续摆弄......但如果有人有类似的经历或问题，我很想知道......
谢谢！