css - 将值附加到列表

Question

在 SCSS 中，我试图编写一个函数，它接受一个长度在 0 到 3 之间的列表，并附加如下默认值以使长度始终为 3，然后使用它。在示例中，列表中第一、第二和第三位置的默认值分别为 10、20 和 30。

@function foo($list){
  @if length($list) < 1 {append($list, 10)}
  @if length($list) < 2 {append($list, 20)}
  @if length($list) < 3 {append($list, 30)}
  // code follows that uses @list
}

但是上面的代码会返回这样的错误:

Invalid CSS after "...pend($list, 10)": expected "{", was ";".

如何修复？

Answer 1

你必须将它设置为一个变量，像 append() 这样的函数是非破坏性的(即它们不修改原始列表，它们只返回一个新列表)

@function foo($list){
  @if length($list) < 1 { $list: append($list, 10) }
  @if length($list) < 2 { $list: append($list, 20) }
  @if length($list) < 3 { $list: append($list, 30) }
  // code follows that uses @list
}