@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