浏览器前缀作为变量通过@each sass [英] Browser prefixes as variables through @each sass

问题描述

我们有很多计划的动画，我正在寻找一个更清洁的方式来解决所有浏览器。这样的东西很棒：

We have a lot of animation planned and am looking for a cleaner way to address all browsers. Something sass-y like this would be great:

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

除了 @＃{$ vendor} keyfr ... 在 @ 之后产生一个错误， $ c>。有没有办法强制 @ 到css？

Except that the @#{$vendor}keyfr... produces an error expecting a number or function after the @. Is there a way to force the @ through to the css?

否则，有人想出一个更清洁方法可以通过 @each ， @mixin 或其他任何可以为每个浏览器列出每个动画

Otherwise, has anyone come up with a cleaner way to accomplish this with @each, @mixin or anything else that would save from listing every animation for every browser (i.e. below)?

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

推荐答案

您可以使用mixin来做到这一点，您可以预定义供应商关键帧，而不是在循环中动态生成供应商。这些行可能是：

You could do that with a mixin, where you pre-define the vendor keyframes instead of dynamically generating the vendors in a loop. Something along these lines maybe:

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

这篇关于浏览器前缀作为变量通过@each sass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！