Question

我想创建一个循环，创建8个不同的类，相同的包含但不同的值。这是我的代码：

@for $i from 1 through 8 {
  $baseDelay: 0.4;
  .fade-in-#{$i} {
    @include animationDelay(#{$baseDelay}+((#{$i}-1)/2)s);
  }
}

我应该把它作为第一堂课的输出：

.fade-in-1 {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

但我把它作为第一个输出：

.fade-in-1 {
  -webkit-animation-delay: 0.4+(1-0.5) s;
  animation-delay: 0.4+(1-0.5) s;
}

有人能帮助我吗？我认为这个问题是由于Sass认为总和中的某些东西是刺痛所致。

Answer 1

您可以使用此代码。

这就是我的mixin看起来像

@mixin animationDelay($var) {
  -webkit-animation-delay: $var;
  animation-delay: $var;
}

这就是我的for循环看起来像

@for $i from 1 through 8 {
  $baseDelay: 0.4;
  .fade-in-#{$i} {
    @include animationDelay( ($baseDelay + ($i - 1)/2) + s); 
    // I did the calculation first before adding the s for seconds
  }
}

结果

.fade-in-1 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s; }

.fade-in-2 {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s; }

.fade-in-3 {
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s; }

 .fade-in-4 {
  -webkit-animation-delay: 1.9s;
  animation-delay: 1.9s; }

 .fade-in-5 {
  -webkit-animation-delay: 2.4s;
  animation-delay: 2.4s; }

 .fade-in-6 {
  -webkit-animation-delay: 2.9s;
  animation-delay: 2.9s; }

 .fade-in-7 {
  -webkit-animation-delay: 3.4s;
  animation-delay: 3.4s; }

 .fade-in-8 {
  -webkit-animation-delay: 3.9s;
  animation-delay: 3.9s; }

Sass循环输出字符串而不是数字

1 个答案: