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

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