Question

我想使用sass（理想的缩进语法）将相同的转换应用于多个不同的属性。为此，我想使用@each指令。我已经搜索了一些例子，但是关于sass函数的文档很不稳定。

这就是我所拥有的：

#sidebar {
  transition: background-color 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55), width 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

预期结果：

{{1}}

我收到一条错误说：函数只能包含变量声明和控制指令。

我怀疑这个问题确实是我的追加函数，但我猜我有一些语法错误，我无法充分调试。

感谢任何帮助！

Answer 1

如果您要发送列表，则必须使用逗号分隔值

transition: default-trans(background-color, width)

当您追加结果时，需要再次将其分配给输出。

从

改变

append($out, "#{$tran} 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55)")

到

$out: append($out, #{$tran} 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55), comma)

代码块

@function default-trans($trans...)
  $out: ()
  @each $tran in $trans
    $out: append($out, #{$tran} 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55), comma)
  @return $out

#sidebar
  transition: default-trans(background-color, width)

每个SASS功能

1 个答案: