我尝试使用SASS中的循环创建以下命名的@keyframes集合

@keyframes loading-1 {
    14.28% {
        opacity: 0.3;
    }
}

@keyframes loading-2 {
    28.57% {
        opacity: 0.3;
    }
}

@keyframes loading-3 {
    42.86% {
        opacity: 0.3;
    }
}

@keyframes loading-4 {
    57.14% {
        opacity: 0.3;
    }
}

@keyframes loading-5 {
    71.43% {
        opacity: 0.3;
    }
}

@keyframes loading-6 {
    85.71% {
        opacity: 0.3;
    }
}

@keyframes loading-7 {
    100% {
        opacity: 0.3;
    }
}

字符串
我一直在看包括StackOverflow在内的几个参考文献，没有一个能解决我试图实现的@keyframe命名类型，我真的不认为有任何重复的帖子能完全解决这个问题。
我希望能够做到这样的事情：

$number-of-steps: 7;

@function to-fixed($float, $digits: 2) {
    $sass-precision: 5;
    
    @if $digits > $sass-precision {
      @warn "Sass sets default precision to #{$sass-precision} digits, and there is no way to change that for now."
      + "The returned number will have #{$sass-precision} digits, even if you asked for `#{$digits}`."
      + "See https://github.com/sass/sass/issues/1122 for further informations.";
    }
    
    $pow: pow(10, $digits);
    @return round($float * $pow) / $pow;
}

   :

@for $l from 1 through $number-of-steps {

    @keyframes loading_#{$l} {
        {to-fixed((100/$l), 2)}% {
            opacity: 0.3;
        }
    }

}

型
但SASS抱怨说，

Compilation Error
Error: expected "}".
   ╷
18 │     @keyframes loading-#{$l} {
                                   ^

型
有没有一种方法可以动态地为这些关键帧创建名称？
我正在使用Visual Code Studio中的“Live SASS编译器”，它似乎是最新的。
TIA！