在 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): returns $list 中 $index 位置的值所以在最后一个例子中， $buttonConfig: 'save' 50px, 'cancel' 50px, 'help' 100px; $tuple 在第一次迭代中将是 'save' 50 所以 ($tuple, 1) 将被保存并且 ($tuple, 2) 将是宽度值 50px 等等。

在 SCSS 中迭代列表数据类型

Iterate list data type in SCSS

css

sass

scss-lint