Vue项目使用sass插值为动画添加动态名称报错

Question

Vue项目使用sass插值为动画添加动态名称报错

@mixin borderOpen($name,$x,$y,$time,$delay,$size) {
    animation: $name $time + s $delay + s forwards;
    @keyframes #{$name} {
        0%{
            width: 0;
            height: 0;
        }
        50%{
            width: $x + px;
            height: 0;
        }
        100%{
            width: $x + px;
            height: $y + px;
        }
    }
}

尝试过更换sass-loader版本。
不过在非Vue项目，单纯的html文件中使用没有问题

Answer 1

亲测有效

<template>
  <div class="hello">
    <div class="animation">1</div>
  </div>
</template>

<style scoped lang="scss"  >

@mixin borderOpen($name, $x, $y, $time, $delay) {
  animation: $name $time + s $delay + s forwards;
  @keyframes #{$name} {
    0% {
      width: 0;
      height: 0;
    }
    50% {
      width: $x + px;
      height: 0;
    }
    100% {
      width: $x + px;
      height: $y + px;
    }
  }
}

.animation {
  background: #f00;
  @include borderOpen(animation1, 100, 100, 1, 1);
}