Question

我们计划了很多动画，我正在寻找一种更清晰的方式来解决所有浏览器问题。像这样的东西会很棒：

@each $browser in '-webkit-', '-moz-', '-o-', '-ms-' {
  @#{$browser}keyframes rotate {
    from { #{$browser}transform: rotate(0deg);}
    to { #{$browser}transform: rotate(360deg);}
  }
}

除了@#{$vendor}keyfr...在@之后产生一个期望数字或函数的错误。有没有办法强制@通过css？

否则，有没有人想出一个更简洁的方法来完成这个@each，@mixin或其他任何可以为每个浏览器（即下面）列出每个动画而节省的东西？

@-webkit-keyframes rotate {
  from { -webkit-transform: rotate(0deg);}
  to { -webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotate {
  from { -moz-transform: rotate(0deg);}
  to { -moz-transform: rotate(360deg);}
}

@-o-keyframes rotate {
  from { -o-transform: rotate(0deg);}
  to { -o-transform: rotate(360deg);}
}

@-ms-keyframes rotate {
  from { -ms-transform: rotate(0deg);}
  to { -ms-transform: rotate(360deg);}
}

Answer 1

您可以使用mixin执行此操作，您可以预先定义供应商关键帧，而不是在循环中动态生成供应商。沿着这些方向的东西可能是：

@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        $browser: '-webkit-'; @content;
    }
    @-moz-keyframes #{$animationName} {
        $browser: '-moz-'; @content;
    }
    @-o-keyframes #{$animationName} {
        $browser: '-o-'; @content;
    }
    @keyframes #{$animationName} {
        $browser: ''; @content;
    }
} $browser: null;

@include keyframes('rotate') {
    from { #{$browser}transform: rotate(0deg);}
    to { #{$browser}transform: rotate(360deg);}
}

DEMO

Answer 2

只是为了让mod继续......

http://sassmeister.com/gist/554597ba07c49dbd92ce

@include makeKeyframes('badgeGlow') {
  from { @include box-shadow(0px 0px 10px rgba($glowToColor, 0.3), 0px 1px 2px rgba(0, 0, 0, .80));color:$glowBaseColor;border-color: $glowBaseColor;}
  50% { @include box-shadow(0px 0px 16px rgba($glowToColor, 0.8), 0px 1px 2px rgba(0, 0, 0, .80));color:white;border-color: lighten($glowBaseColor, 20);}
  to { @include box-shadow(0px 0px 10px rgba($glowToColor, 0.3), 0px 1px 2px rgba(0, 0, 0, .80));color:$glowBaseColor;border-color: $glowBaseColor;}
}

button.glow {
  @include setKeyframeType('badgeGlow',1.5s,infinite);
}

请注意，您调用keyFrame生成器一次，您可以使用setKeyframeType mixin从类中的任何其他位置引用关键帧，并提供一些基本参数。当你拥有许多可能共享相同类型过渡的元素时，这很棒。

浏览器前缀为@each sass的变量

2 个答案:

DEMO