Advanced SCSS/SASS mixin/function - css

Question

I've made a pretty nice chaining effect, that I would love to turn into a mixin, or function, but I can't wrap my head around how to build it. Searched everywhere but I can't assemble the puzzle.
The output should look like this
{
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
}
}
}
}
My current attempt (doesn't compile), looks like this:
#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
}
}
}
}
How can I get two objects ($from and $to) passed through a function. Is that even possible?

Answer 1

Have you tried SASS-maps to render the declarations? For example:
$mapFrom: (opacity: 0, transform: translateY(3em));
$mapTo: (opacity: 1, transform: translateY(0));
And then in your mixin using of #each directive:
#each $key, $value in $from {
#{$key}: #{$value};
}
But then there is another problem. If I try to parse the modified mixin, I get the following error:
Error: "20" is not an integer.
on line 22 of test.scss, in `inviewChainAnimation'
from line 34 of test.scss
The error occurs at this line:
#for $i from 1 through #{$count} {
To solve this change #{count} to $count. The same for #{$delay}. That's it. Here is the final working 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
}
}
}
}
Use of the mixin:
.container {
#include inviewChainAnimation('foo', $mapFrom, $mapTo, .15, .1);
}
If you have the need to pass only one set of css properties, you can use #content to simplify your mixin. See for an example at Passing css property:value into a mixins argument.