Question

我尝试使用mixin自动为@keyframes添加前缀

@mixin keyframePrefix($name) {
@-webkit-keyframes #{$name} {
    @content;
}
@-moz-keyframes #{$name} {
    @content;
}
@-o-keyframes #{$name} {
    @content;
}
@keyframes #{$name} {
    @content;
}

这在技术上有效，但它很大。我有一个用于各个属性的前缀mixin，它使用@each语句使其更紧凑：

$prefixes: ("-moz-", "-webkit-", "-o-", "");
@mixin prefix($property, $value) {
    @each $prefix in $prefixes {
        #{$prefix +  $property}: $value;
    }
}

但是，我的问题是@ -prefix-keyframes上的字符串插值。它似乎不想让我只在那里贴一个@：

@mixin keyframePrefix($name) {
    @each $prefix in $prefixes {
        @#{$prefix}keyframes #{$name} {
            @content;
        }
    }
}

所以我的问题是：如何逃脱@符号？我已经尝试了很多嵌套插值和字符串等组合，但似乎没有任何效果。添加反斜杠以使行\@#{$prefix}keyframes #{$name}读取最接近的行，并且汇编为\@-moz-keyframes prompt 50%。

Answer 1

不允许在名称指令中插值。您可以找到此issue已打开。你必须使用大版本才能解决它。

@mixin keyframes($name) {    
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-o-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

顺便说一下，你错过了最后的}。

使用@each缩短在SCSS中混合的@keyframe前缀

1 个答案: