Search code examples
csssassscss-lint

Iterate list data type in SCSS

I found this interesting SCSS advanced guide, with lot of cool approaches to use. Then I got stucked on the one below, the iterator is clear but I cannot understand what the number 1 and number 2 are used for. Any ideas??

SCSS

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

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

Compiled CSS

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

  • nth($list, $index): returns the value at $index position in $list so in the last example , $buttonConfig: 'save' 50px, 'cancel' 50px, 'help' 100px; $tuple in first iteration will be 'save' 50 so ($tuple, 1) will be save and ($tuple, 2) will be the width value 50px and so on .