vue项目中在scss中使用js的值

最近写项目的时候用到了动画，创建动画的过程中需要根据数据量的多少来进行位移，这个时候就需要在scss中用到js中的值，我们固然可以在template中使用行内样式去设置属性，如下所示：

<div class="test" :style="{ margin: offset}">

这里的offset毫无疑问就是js中的一个变量了。这种方式固然不错，但是很明显不能满足我的效果，因为定义动画并不是给元素设置样式，我需要通过js的值来判断我正在定义动画时到底应该设置多少值才能达到我想要的效果。很明显这里应该使用css变量来完成，具体实现可以看一下例子

<div
  class="animation	"
  :style="{
     '--lengthCorrection': lastQualityList.length - 5,
     '--timeing': lastQualityList.length + 's',
    }"
></div>

@keyframes ani {
  0% {
    transform: translateY(calc((+18% + 6px) * var(--lengthCorrection)));
  }
  100% {
    transform: translateY(calc((-18% - 6px) * 5));
  }
}

参考https://blog.csdn.net/lihefei_coder/article/details/104815616/