Advanced SCSS/SASS mixin/function

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

Как я могу получить два объекта ($ от и $ to), прошедшего через функцию. Возможно ли это?

Answer 1

Вы пробовали SASS-maps для визуализации деклараций? Например:

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

И тогда в вашем Mixin использовании @each директивы:

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

Использование Mixin:

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

Если у вас есть необходимость передавать только один набор свойств CSS, вы можете использовать @content для упрощения подмешать. См. Пример: Passing css property:value into a mixins argument.