Sass 在mixin中使用传递的变量作为键/值对

我试着查找这个，但没有成功。我无法使用正确的搜索参数进行搜索

我正在SASS中创建一个mixin，它将允许我通过传递动画名称（从值和到值）来创建关键帧。下面是一个例子：

@mixin keyframes($name, $from, $to) {
    @-webkit-keyframes #{$name} {
        from {
            left: $from
        }
        to {
            left: $to
        }
    }
}

这是一个较短的版本，因为我还将为@moz关键帧和@keyframes添加行。我更喜欢这种方法，这样我就不必在动画中重复“from”和“to”，让mixin使用@content抓取它，但我也不想假设“left”是唯一会受到影响的属性

我想做的是将$from和$to变量都视为对象，以便它们可以包含一系列键/值对。当我尝试这样做时：

$mixin keyframes($name, $from, $to) {
    @-webkit-keyframes #{$name} {
        from {
            $from
        }
        to {
            $to
        }
    }
}

…我得到编译错误，因为它不包括一个键/值对，而不是一个变量

有没有办法告诉SASS将$from和$to视为一系列键/值对？我已经尝试过#{$from}，但它仍然抛出编译错误

---

谢谢

您不能这样做，因为属性/值不是字符串。您必须使用映射来编写它，如下所示：

@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));

但是，如果您的目标是编写一个灵活的mixin，我建议您不要这样做。只需写下您自己的“从/到”语句：

@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        @content
    }
}

@include keyframes(foo) {
  from {
    top: 10px;
  }

  to {
    top: 50px;
  }
}

---

谢谢你，西曼农！即使我最后不走这条路，至少知道怎么做会很好。：）