SASS가 계산을 해결하지 않는 이유는 무엇입니까?

Question

왜 SASS가 계산을 해결하지 않습니까?

$animation-speed-half-life: 1s; 

@for $i from 0 through 31 { 
    &:nth-child(#{$i}) { 
    transition-delay: #{$animation-speed-half-life - $animation-speed-half-life/$i}; 
    } 
} 

대신은 transition-delay: 1s - 1s/1;

Answer 1

이미 그것을 디버깅나요 출력? 나는 Sassmeister (SASS의 v3.4.21)에서 코드를 테스트, 그것은 나에게 참조 오류 보여줍니다

Base-level rules cannot contain the parent-selector-referencing character '&'.

DEBUG를

$animation-speed-half-life: 1s; 
$i: 1; 


$test: #{$animation-speed-half-life - $animation-speed-half-life/$i}; 
@error $test; // this will render '0s' as expected 


.parentElement { // comment this to show the reference error 
    @for $i from 0 through 31 { 
    &:nth-child(#{$i}) { 
     transition-delay: #{$animation-speed-half-life - $animation-speed-half-life/$i}; 
    } 
    } 
} 

Sassmeister Fiddle

하지 않음 그게 당신의 전체 코드 또는 스 니펫이지만 그것은 내가 뱉어내는 오류를 경고한다면 위의 oted. 존재하지 않는 상위 요소를 찾습니다. 아마도 귀하의 버전에서 계산되지 않는 이유 일 것입니다. .parentElement은 작업 방식을 제공하기위한 모조품입니다.

가능한 FIX

가 추가 부모 요소가 존재하는 경우 확인 @if -condition :

@if & { ... } 

그래서 기본적으로 루프 주위 조건을 포장 :

@if & { 
    @for $i from 0 through 31 { 
    &:nth-child(#{$i}) { 
     transition-delay: #{$animation-speed-half-life - $animation-speed-half-life/$i}; 
    } 
    } 
} 

Sassmeister Fiddle

if & { .. 문은 선택 사항입니다. 오류를 어떻게 해결할 수 있는지 알려주고 싶었습니다. 오류가 발생하는 동안 SASS 버전이 여전히 계산을 보간하는지 잘 모르겠습니다.

내 자신의 개인적인 방법으로는 부모 요소와 에러없이 같은 자리 표시 기능이 발생하기 때문에 if & 문없이 자리 표시자를 사용하는 것입니다. 믹스 인은 또한 일하는 것이하지만 루프가 그래서 자리를해야 작동하는 모든 매개 변수를 필요로하지 않는다

%test { 
    @for $i from 0 through 31 { 
    &:nth-child(#{$i}) { 
     transition-delay: #{$animation-speed-half-life - $animation-speed-half-life/$i}; 
    } 
    } 
} 

parent { 
    @extend %test; 
} 

Sassmeister Fiddle

: 요소가 존재하지 않는하지만이 경우에도 자리를 위해 무엇인지.

Answer 2

왜 Sass가 계산하지 않을 지 모르지만 실제로는 transition-delay 값을 보간 할 필요가 없습니다. 주위에 CSS가 없기 때문입니다.

@mixin incremental-transition-delay($child-count, $half-life: 1s) { 
    @for $i from 1 through $child-count { 
    &:nth-child(#{$i}) { 
     transition-delay: $half-life - $half-life/$i; 
    } 
    } 
} 

.thing { 
    @include incremental-transition-delay(32, 1s); 
} 

:

이 코드의 내 구현 될 것이다