숫자 대신 Sass 루프 출력 문자열

Question

같은 포함하지만 값이 다른 8 개의 다른 클래스를 만드는 루프를 만들고 싶습니다.

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

수있는 사람의 도움

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

는 내가 처음 클래스의 출력으로이를 얻어야한다 : 여기 내 코드는 나를? 나는 Sass가 그 총액에서 무언가가 찌름이라고 생각하기 때문에 문제가 발생했다고 생각한다.

Answer 1

이 코드를 사용할 수 있습니다.

이 내 믹스 인이

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

모습입니다 그리고 이것은 내 루프가

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

입니다