Looping though arguments in a mixin

Posted on

in

,
@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 *

About me

Mark Wong is a front end developer with 10+ years experience. Most of his knowledge of HTML5, CSS and Js is self taught.

Calendar

April 2024
M T W T F S S
1234567
891011121314
15161718192021
22232425262728
2930