Css 使用SASS为参数设置关键帧

我已经用CSS创建了一个旋转旋转木马，我很满意。它包含在代码片段中。原稿正在播放

它基本上旋转四个盒子的位置。总的动画时间是8秒，我已经设置好了，使其在20%的时间内保持静止，然后移动框5%，然后再次等待（运行代码段；我认为我没有很好地解释它）

现在我想把它参数化。Sass是我选择的武器，我可以轻松设置一些变量来帮助我。因此，在我的风格顶部，我有：

$delays: 0s, -6s, -4s, -2s;
$fullanimtime: 8s;
$animationstops: 0%, 20%, 25%, 45%, 50%, 70%, 75%, 95%, 100%;

我使用

$fullanimtime

作为我的

动画持续时间

，并使用

$delays

列表配置我的

pos XXXX

样式上的延迟：

.pos-1 {
  animation-delay: nth($delays, 1);
}
.pos-2 {
  animation-delay: nth($delays, 2);
}
.pos-3 {
  animation-delay: nth($delays, 3);
}
.pos-4 {
  animation-delay: nth($delays, 4);
}

这就像一个魔咒，通过正确设置

$fullanimtime

和

$delays

，我可以将动画更改为在任何时间正确运行，无论是8秒还是120秒

问题是

@关键帧

使用百分比。因此，如果我将其他变量设置为较长的动画时间，移动长方体的实际过渡会变得非常缓慢：8秒，过渡运行400毫秒，但120秒，它们需要6秒，这比酷更烦人

因此，

$animationstops

变量应该允许我配置合理的时间。但这不起作用

出于我不理解的原因，我不能在关键帧声明中使用Sass

nth

函数，也不能使用Sass变量

@keyframes rotate-board {
  nth($animationstops, 1) {
    // This gives an error:
    // Invalid CSS after "nth": expected keyframes selector, was "($animationstop..."
  }
  $somevariable {
    // This gives an error:
    // Invalid CSS after " $somevalue ": expected ":", was "{"
  }
}

有没有办法解决这个问题，或者我发现了Sass的局限性？如果我想这样做的话，是否应该使用另一个预处理器

正文{
保证金：0；
填充：0；
}
.框架{
高度：580px；
宽度：100vw；
背景：浅灰色；
位置：相对位置；
框大小：边框框；
}
.盒子{
宽度：计算（50%-30px）；
高度：计算（50%-30px）；
顶部：20px；
左：20px；
位置：绝对位置；
动画名称：旋转板；
动画持续时间：8秒；
动画计时功能：轻松进出；
动画迭代次数：无限；
}
雷德博克斯先生{
背景：红色；
}
格林博克斯先生{
背景：绿色；
}
.蓝盒子{
背景：蓝色；
}
.橙盒{
背景：橙色；
}
@关键帧旋转板{
0% {
顶部：20px；
左：20px；
底部：计算（50%+10px）；
右：计算（50%+10px）；
}
20% {
顶部：20px；
左：20px；
底部：计算（50%+10px）；
右：计算（50%+10px）；
}
25% {
顶部：20px；
左：计算（50%+10px）；
底部：计算（50%+10px）；
右：20px；
}
45% {
顶部：20px；
左：计算（50%+10px）；
底部：计算（50%+10px）；
右：20px；
}
50% {
顶部：计算（50%+10px）；
左：计算（50%+10px）；
底部：20px；
右：20px；
}
70% {
顶部：计算（50%+10px）；
左：计算（50%+10px）；
底部：20px；
右：20px；
}
75% {
顶部：计算（50%+10px）；
左：20px；
底部：20px；
右：计算（50%+10px）；
}
95% {
顶部：计算（50%+10px）；
左：20px；
底部：20px；
右：计算（50%+10px）；
}
100% {
顶部：20px；
左：20px；
底部：计算（50%+10px）；
右：计算（50%+10px）；
}
}
.pos-1{
动画延迟：0s；
}
.pos-2{
动画延迟：-6s；
}
.pos-3{
动画延迟：-4s；
}
.pos-4{
动画延迟：-2s；
}

---

您可以这样编写变量：

#{nth($animationstops, 1)} 

我为您创建了一个SassMester：

这就是它的作用：

---

PS：你的动画非常漂亮！祝贺你！：）

正如ReSedano所说，您可以使用语法

{$var}

来解决您的问题

您还可以使用，以便用更少的行创建更可读的代码

您可以使用for循环改进与

pos-*

相关的代码的最后一部分，如下面的代码

$delays: 0s, -6s, -4s, -2s;
@for $i from 1 through 4 {
  .pos-#{$i} {
    animation-delay: nth($delays, $i);
  }
}

$animationPerc: 0%, 20%, 25%, 45%, 50%, 70%, 75%, 95%, 100%;
$animationPos: 20px, calc(50% + 10px);
$animationOffset: 0, 2, 4, 6; // top, left, bottom, right
@keyframes rotate-board {
  @for $i from 0 to 9 {
    #{nth($animationPerc, $i + 1)} {
      top: nth($animationPos, 1 + (floor((nth($animationOffset, 1) + $i)/4) % 2));
      left: nth($animationPos, 1 + (floor((nth($animationOffset, 2) + $i)/4) % 2));
      bottom: nth($animationPos, 1 + (floor((nth($animationOffset, 3) + $i)/4) % 2));
      right: nth($animationPos, 1 + (floor((nth($animationOffset, 4) + $i)/4) % 2));
    }
  }
}

您还可以尝试为所请求的问题创建一个循环。例如，我发现有一种类似aabbbb的模式，每边都有一个偏移量，可以映射您的案例，以便重现您想要的内容。使用此逻辑，我创建了以下代码

$delays: 0s, -6s, -4s, -2s;
@for $i from 1 through 4 {
  .pos-#{$i} {
    animation-delay: nth($delays, $i);
  }
}

$animationPerc: 0%, 20%, 25%, 45%, 50%, 70%, 75%, 95%, 100%;
$animationPos: 20px, calc(50% + 10px);
$animationOffset: 0, 2, 4, 6; // top, left, bottom, right
@keyframes rotate-board {
  @for $i from 0 to 9 {
    #{nth($animationPerc, $i + 1)} {
      top: nth($animationPos, 1 + (floor((nth($animationOffset, 1) + $i)/4) % 2));
      left: nth($animationPos, 1 + (floor((nth($animationOffset, 2) + $i)/4) % 2));
      bottom: nth($animationPos, 1 + (floor((nth($animationOffset, 3) + $i)/4) % 2));
      right: nth($animationPos, 1 + (floor((nth($animationOffset, 4) + $i)/4) % 2));
    }
  }
}

---

太棒了！非常感谢。不客气！：）还有…，好吧，这只是我的观点，但是。。。请与我们一起编写Sass代码，不要考虑更改预处理器，因为Sass太棒了！！：P干杯。：）非常好的建议，谢谢。它确实在我的雷达上，但我很快就被卡住了。