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

【问题标题】：Using @each to shorten @keyframe prefixes mixing in SCSS使用 @each 缩短 SCSS 中混合的 @keyframe 前缀
【发布时间】：2017-04-21 23:11:37
【问题描述】：

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

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

这在技术上有效，但它很大。我有一个用于单个属性的前缀混合器，它使用 @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%。

【问题讨论】：

标签： sass escaping mixins keyframe string-interpolation

【解决方案1】：

不允许在名称的指令中进行插值。你可以找到这个issue 已打开。在解决之前，您必须使用大版本。

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

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

【讨论】：