Using passed Variable as Key/Value pair in Mixins - sass

Question

I tried looking this up, but have not had success. I could not be looking with the right search parameters.
I'm creating a mixin in SASS the will allow me to create keyframes by passing the animation name, from value and to value. Here's an example:
#mixin keyframes($name, $from, $to) {
#-webkit-keyframes #{$name} {
from {
left: $from
}
to {
left: $to
}
}
}
This is a shorter version as I would also add lines for #-moz-keyframes and #keyframes. I prefer this method so that I'm not having to repeat "from" and "to" in the animations and having the mixin just grab it using #content, but I also don't want to assume that "left" is the only property that is going to be affected.
What I'd like to do is treat both $from and $to variables as Objects so that they can contain a series of key/value pairs. When I attempt this:
$mixin keyframes($name, $from, $to) {
#-webkit-keyframes #{$name} {
from {
$from
}
to {
$to
}
}
}
...I get compile errors because it's excepting a key/value pair and not a variable.
Is there a way to tell SASS to treat $from and $to as a series of key/value pairs? I tried #{$from} already and it still throws that compile error.
Thanks!

Answer 1

You can't do that because property/values aren't strings. You would have to write it using mappings, like this:
#mixin keyframes($name, $from, $to) {
#-webkit-keyframes #{$name} {
from {
#each $prop, $val in $from {
#{$prop}: $val;
}
}
to {
#each $prop, $val in $to {
#{$prop}: $val;
}
}
}
}
#include keyframes(foo, (top: 10px), (top: 50px));
However, I would recommend not doing this at all if your goal is to write a flexible mixin. Just write out your own from/to statements:
#mixin keyframes($name) {
#-webkit-keyframes #{$name} {
#content
}
}
#include keyframes(foo) {
from {
top: 10px;
}
to {
top: 50px;
}
}