通过@each sass 将浏览器前缀作为变量答案

【问题标题】：Browser prefixes as variables through @each sass通过@each sass 将浏览器前缀作为变量
【发布时间】：2013-11-30 06:08:34
【问题描述】：

我们计划了很多动画，并且正在寻找一种更简洁的方式来处理所有浏览器。像这样的sass-y会很棒：

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

【问题讨论】：

如果您使用 Compass：stackoverflow.com/a/17621055/557612 我个人更喜欢在后期处理阶段使用 autoprefixer。

标签： css cross-browser sass css-animations vendor-prefix

【解决方案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

【讨论】：

一个很好的解决方案！为了符合新的 3.4 语法，我们需要在 mixin 中将 !global 添加到 $browser 的本地 vversion：sassmeister.com/gist/7ed6237f0e7f0aa89935 不幸的是，在 3.3 之前的 SASS 中不起作用（但在 libsass 中起作用2.0！）

【解决方案2】：

只是为了让模组继续运行......

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

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

【讨论】：