迭代SCSS中的列表数据类型

Question

我发现这个有趣的SCSS advanced guide，有很多很酷的使用方法。然后，我陷入了下面的问题，迭代器很清楚，但是我不明白数字1和数字2的用途。有什么想法吗？

SCSS

$buttonConfig: 'save' 50px, 'cancel' 50px, 'help' 100px; 

@each $tuple in $buttonConfig {
  .button-#{nth($tuple, 1)} {
    width: nth($tuple, 2);
  }
}

已编译的CSS

.button-save {
  width: 50px;
}
.button-cancel {
  width: 50px;
}
.button-help {
  width: 100px;
}

Answer 1

nth($list, $index)：返回$ list中$ index位置的值 所以在最后一个例子中， $ buttonConfig：“保存” 50px，“取消” 50px，“帮助” 100px； $tuple在第一次迭代中将“保存” 50，因此将保存（$ tuple，1），将（$ tuple，2）的宽度值设置为50px，依此类推。