带SASS的关键帧参数

Question

我在CSS中创建了一个旋转旋转木马，我对此非常满意。它包含在片段中。原版在这个CodePen上。

它基本上旋转了四个盒子的位置。动画的总时间是8秒，我已经设置了它，所以它保持静止的20%，然后移动5%的框，然后再等待(运行片段，我不认为我解释得很好)。

现在我想把它参数化。Sass是我选择的武器，我可以很容易地设置几个变量来帮助我。所以在我风格的顶端，我有这样一个：

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

我使用$fullanimtime作为animation-duration，并使用$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秒。

问题是@keyframes使用百分比。因此，如果我为长动画时间设置其他变量，移动框的实际转换会变得非常慢:8秒，转换运行400 ms，但120秒，它们需要6秒，这比酷更烦人。

因此，$animationstops变量应该允许我配置合理的时间。但这不管用。

由于我不明白的原因，我不能在keyframe声明中使用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的局限性？如果我想这样做的话，我是否应该使用另一个预处理器呢？

​

body {
  margin: 0;
  padding: 0;
}
.frame {
  height: 580px;
  width: 100vw;
  background: lightgrey;
  position: relative;
  box-sizing: border-box;
}

.box {
  width: calc(50% - 30px);
  height: calc(50% - 30px);
  top: 20px;
  left: 20px;
  position: absolute;
  animation-name: rotate-board;
  animation-duration: 8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.redbox {
  background: red;
}
.greenbox {
  background: green;
}
.bluebox {
  background: blue;
}
.orangebox {
  background: orange;
}

@keyframes rotate-board {
  0% {
    top: 20px;
    left: 20px;
    bottom: calc(50% + 10px);
    right: calc(50% + 10px);
  }
  20% {
    top: 20px;
    left: 20px;
    bottom: calc(50% + 10px);
    right: calc(50% + 10px);
  }
  25% {
    top: 20px;
    left: calc(50% + 10px);
    bottom: calc(50% + 10px);
    right: 20px;
  }
  45% {
    top: 20px;
    left: calc(50% + 10px);
    bottom: calc(50% + 10px);
    right: 20px;
  }
  50% {
    top: calc(50% + 10px);
    left: calc(50% + 10px);
    bottom: 20px;
    right: 20px;
  }
  70% {
    top: calc(50% + 10px);
    left: calc(50% + 10px);
    bottom: 20px;
    right: 20px;
  }
  75% {
    top: calc(50% + 10px);
    left: 20px;
    bottom: 20px;
    right: calc(50% + 10px);
  }
  95% {
    top: calc(50% + 10px);
    left: 20px;
    bottom: 20px;
    right: calc(50% + 10px);
  }
  100% {
    top: 20px;
    left: 20px;
    bottom: calc(50% + 10px);
    right: calc(50% + 10px);
  }
}

.pos-1 {
  animation-delay: 0s;
}
.pos-2 {
  animation-delay: -6s;
}
.pos-3 {
  animation-delay: -4s;
}
.pos-4 {
  animation-delay: -2s;
}

<div class="frame">
  <div class="box redbox pos-1"></div>
  <div class="box greenbox pos-2"></div>
  <div class="box bluebox pos-3"></div>
  <div class="box orangebox pos-4"></div>
</div>

​

Answer 1

您可以这样编写变量：

#{nth($animationstops, 1)} 

我为你创建了一个Sassmeister：https://www.sassmeister.com/gist/7c9b06c6b5a7cc580b14cbd1b312c566

在这里它在起作用：https://codepen.io/anon/pen/PBeNLV

PS：你的动画非常漂亮！恭喜:)

Answer 2

正如ReSedano所说，您可以使用语法#{$var}来解决问题。

您还可以使用Sass提供的循环来创建更易读的代码，减少代码行数。

可以使用for循环改进与pos-*相关的代码的最后一节，如下面的代码所示。

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

您也可以尝试为您所要求的问题创建一个循环。例如，我发现有一个像aaaabbbb这样的模式，它为每一方都有一个偏移量，可以映射您的情况，以便复制您想要的东西。根据这个逻辑，我创建了以下代码。

$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));
    }
  }
}