< Back to Coding, SASS

Looping though arguments in a mixin

@mixin stairs($length, $items...) {
  @for $i from 0 to length($items) {
    #{nth($items, $i + 1)} {
      position: absolute;
      width: $length;
      height: $length;
      background: black;
      margin-top: $i * $length;
      margin-left: $i * $length;
    }
  }
}

@include stairs(100px, ".first", ".second", ".third");

Things to note here:

The last argument ends with … which means it accepts any number of arguments and will put those arguments into a list.

#{nth($items, $i + 1)} gets the argument from the list. You just specify the list and the index. Unlike arrays, the index of the first element is 1.

The result is 3 black squares going downwards like a staircase. You can add more elements at the end or change the size of the steps.

Leave a Reply

Your email address will not be published. Required fields are marked *