高度なSCSS/SASSミックスイン/ファンクション

Question

ミックスインやファンクションに変身したいと思っていますが、私はそれを構築する方法を頭で覆すことができません。どこでも検索されましたが、私はパズルを組み立てることができません。

出力はこの

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

私の現在の試み（コンパイルされません）のようになりますが、次のようになります。

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

がどのように私は2つのオブジェクト（から$とを得ることができます$ to）を関数に渡します。それも可能ですか？

Answer 1

宣言をレンダリングするためにSASS-mapsを試しましたか？ @eachディレクティブを使用して

あなたのミックスインで

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

そして：たとえば

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

しかし、その後、別の問題があります。私は修正ミックスインを解析しようとすると、私は次のエラーを取得する：

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

エラーは、この行で発生します。

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

$countにこの変更#{count}を解決するために。 #{$delay}でも同じです。それでおしまい。ここでは、最終的な作業の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 
     } 
    } 
    } 
} 

用途：

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

あなたはCSSプロパティを1セットのみ渡す必要がある場合は、あなたがあなたのミックスインを簡素化するために@contentを使用することができます。例については、Passing css property:value into a mixins argumentを参照してください。