Блог

Я хочу создать цикл, который создаст 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 считает, что что-то в сумме является укусом.

Вы можете использовать этот код.

Вот как выглядит мой миксин

 @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; }