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

Question

我正在尝试使用 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%。

Answer 1

不允许在 name 的指令中插入。你可以找到这个 issue 打开。解决之前一定要用大号的

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

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

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

Using @each to shorten @keyframe prefixes mixing in SCSS

escaping

sass

mixins

keyframe

string-interpolation