SASS 列表的解构赋值

Question

我正在尝试以这种方式解构 SCSS 中的值列表，这很有效，但我想要更精简的方式来做到这一点。

@function update-list($list) {
  $name: nth($list, 1);
  $dur: nth($list, 2);
  $func: nth($list, 3);

  @debug "list values: #{$name} #{$dur} #{$func}";

  @return $name $dur $func;
}

所以，我想替换这部分：

$name: nth($list, 1);
$dur: nth($list, 2);
$func: nth($list, 3);

像 JS 那样做：

[a, b, c] = [10, 20, 30];

更新：

我有 space 分隔列表 $list 传输到函数 update-list.

此外，我添加了此列表的调试结果：

$list: prop1 prop2 prop3;
@debug "list data: #{type-of($list)} #{length($list)} #{list-separator($list)}";
// DEBUG: list data: list 3 space
$list-upd: update-list($list);

Answer 1

您不能像在 JS 中那样进行解构，但是您可以将传递给函数的列表参数展开：

@function update-list($name, $dur, $func) {
  @debug "list values: #{$name} #{$dur} #{$func}";
  @return $name $dur $func;
}

$list: prop1 prop2 prop3;
$list-upd: update-list($list...);

SASS 列表的解构赋值

Destructuring assignment of SASS list

sass

scss-functions