我尝试查找此内容,但没有成功。我找不到正确的搜索参数。
我正在SASS中创建一个mixin,这将允许我通过从值和值传递动画名称来创建关键帧。这是一个例子:
@mixin keyframes($name, $from, $to) {
@-webkit-keyframes #{$name} {
from {
left: $from
}
to {
left: $to
}
}
}
这是一个较短的版本,因为我还要为@ -moz-keyframes和@keyframes添加行。我更喜欢这种方法,这样我就不必在动画中重复“ from”和“ to”,而让mixin只是使用@content来抓取它,但是我也不想假设“ left”是唯一的方法将会受到影响的财产。
我想做的是将$ from和$ to变量都视为Objects,以便它们可以包含一系列键/值对。当我尝试这样做时:
$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,我建议完全不要这样做。只需写出您自己的from / to语句:
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content
}
}
@include keyframes(foo) {
from {
top: 10px;
}
to {
top: 50px;
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句