Warum löst SASS die Berechnung nicht auf?

Question

Warum löst SASS die Berechnung nicht auf?

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

Stattdessen gibt es transition-delay: 1s - 1s/1;

Answer 1

Haben Sie es schon debuggen? testete ich den Code in Sassmeister (SASS v3.4.21), und es zeigt mir ein Referenzfehler:

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

Nicht sicher, wenn das ist Ihr vollständiger Code oder nur ein Schnipsel, aber es warnt mich den Fehler, den ich qu oben erwähnt. Es sucht nach einem übergeordneten Element, das nicht existiert. Wahrscheinlich wird das deshalb in Ihrer Version nicht berechnet. Die .parentElement ist nur ein Dummy, um Ihnen den Arbeitsweg zu bieten.

MÖGLICHE FIX

ein In @if -Bedingung, dass, wenn ein übergeordnetes Element überprüft existiert:

@if & { ... } 

Also im Grunde wickeln die Bedingung um die Schleife:

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

Sassmeister Fiddle

Die Anweisung if & { .. ist optional. Ich wollte Ihnen nur zeigen, wie Sie den Fehler beheben können. Ich bin mir nicht sicher, ob Ihre SASS-Version die Berechnung noch während eines Fehlers interpoliert oder nicht.

Meine eigene persönliche Art und Weise einen Platzhalter verwenden, ohne die if & Anweisung wäre, weil ein Platzhalter fungiert als übergeordnetes Element und keine Fehler auftreten. Auch wenn das Element nicht existiert, aber das ist, was Platzhalter ist für:

%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

Ein Mixin auch funktionieren würde, aber Ihre Schleife benötigt keine Parameter so ein Platzhalter funktionieren soll es tun.

Answer 2

Ich bin nicht sicher, warum Sass das nicht berechnen wird, aber Sie müssen den Wert der Übergangsverzögerung eigentlich nicht interpolieren, da es kein CSS gibt.

Dies würde meine Implementierung des Codes sein:

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