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

Question

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

我在SASS中创建了一个mixin，它允许我通过传递动画名称，从值和值来创建关键帧。这里有一个例子：

​​

这是一个更短的版本，因为我还会为@ -moz-keyframes和@keyframes添加行。我更喜欢这种方法，因此我不必在动画中重复“从”和“到”，并让mixin使用@content来抓取它，但我也不想假设“左”是唯一的财产将会受到影响。

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

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

...我得到的，因为它是一个以外的键/值对，而不是变量编译错误。

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

谢谢！

Answer 1

你不能这样做，因为属性/值不是字符串。你将不得不使用映射，像这样来写：

@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 keyframes($name) { 
    @-webkit-keyframes #{$name} { 
     @content 
    } 
} 

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

    to { 
    top: 50px; 
    } 
}