Erweiterte SCSS/SASS Mix-Funktion

Question

Ich habe einen ziemlich schönen Verkettungseffekt gemacht, den ich gerne zu einem Mixin oder einer Funktion machen würde, aber ich kann mir nicht vorstellen, wie ich ihn bauen soll. Gesucht überall, aber ich kann das Puzzle nicht zusammenbauen.

Die Ausgabe wie diese

{ 
    opacity: 0; 
    transform: translateY(3em); 

    @keyframes moveUp { 
    from { 
     opacity: 0; 
     transform: translateY(3em); 
    } to { 
     opacity: 1; 
     transform: translateY(0); 
    } 
    } 

    .inview ~ & { 
    animation: moveUp 1s forwards; 

    @for $i from 1 through 20 { 
     &:nth-child(#{$i}) { 
     animation-delay: (0.1 * $i) + s 
     } 
    } 
    } 
} 

Mein aktueller Versuch (nicht kompiliert) aussehen sollte, sieht wie folgt aus:

@mixin inviewChainAnimation($animationName, $from, $to, $duration, $delay, $count:20) { 
     $from; 

     @keyframes #{$animationName} { 
      from { 
       $from; 
      } 
      to { 
       $to 
      } 
     } 

     .inview ~ & { 
      animation: #{$animationName} #{$duration} forwards; 

      @for $i from 1 through #{$count} { 
       &:nth-child(#{$i}) { 
        animation-delay: (#{$delay} * $i) + s 
       } 
      } 
     } 
    } 

Wie kann ich zwei Objekte erhalten ($ ab und $ to) hat eine Funktion durchlaufen. Ist das überhaupt möglich?

Answer 1

Haben Sie versucht SASS-maps, um die Deklarationen zu rendern? Zum Beispiel:

$mapFrom: (opacity: 0, transform: translateY(3em)); 
$mapTo: (opacity: 1, transform: translateY(0)); 

Und dann in Ihrem mixin mit der @each Richtlinie:

@each $key, $value in $from { 
    #{$key}: #{$value}; 
} 

Aber dann gibt es ein weiteres Problem. Wenn ich versuche, das modifizierte mixin zu analysieren, erhalte ich folgende Fehlermeldung:

Error: "20" is not an integer. 
    on line 22 of test.scss, in `inviewChainAnimation' 
    from line 34 of test.scss 

Der Fehler in dieser Zeile auftritt:

@for $i from 1 through #{$count} { 

diese Änderung #{count}-$count zu lösen. Das Gleiche gilt für #{$delay}. Das ist es. Hier ist der letzte Arbeits mixin:

@mixin inviewChainAnimation($animationName, $from, $to, $duration, $delay, $count: 20) { 
    @each $key, $value in $from { 
    #{$key}: #{$value}; 
    } 

    @keyframes #{$animationName} { 
    from { 
     @each $key, $value in $from { 
     #{$key}: #{$value}; 
     } 
    } 
    to { 
     @each $key, $value in $to { 
     #{$key}: #{$value}; 
     } 
    } 
    } 

    .inview ~ & { 
    animation: #{$animationName} #{$duration} forwards; 

    @for $i from 1 through $count { 
     &:nth-child(#{$i}) { 
     animation-delay: ($delay * $i) + s 
     } 
    } 
    } 
} 

Verwendung des mixin:

.container { 
    @include inviewChainAnimation('foo', $mapFrom, $mapTo, .15, .1); 
} 

Wenn Sie das Bedürfnis haben nur einen Satz von CSS-Eigenschaften zu übergeben, können Sie @content verwenden, um Ihre mixin zu vereinfachen. Ein Beispiel finden Sie unter Passing css property:value into a mixins argument.