Перебор типа данных списка в SCSS

Question

Я нашел это интересное Расширенное руководство по SCSS , с множеством интересных подходов к использованию. Затем я застрял на приведенном ниже, итератор понятен, но я не могу понять, для чего используются число 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): возвращает значение в позиции $ index в $ list, поэтому в последнем примере $ buttonConfig: 'save' 50px, 'cancel' 50px, 'help' 100px; $tupleв первой итерации будет 'save' 50, поэтому ($ tuple, 1) будет сохранено, а ($ tuple, 2) будет значением ширины 50px и т. д.