Sass Loops

While loops

$i: 6;
@while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
}

Each loops (nested)

$backgrounds: (home, 'home.jpg'),
              (about, 'about.jpg');
@each $id, $image in $backgrounds {
    .photo-#{$id} {
      background: url($image);
    }
}

Each loops (simple)

$menu-items: home about contact;
@each $item in $menu-items {
    .photo-#{$item} {
      background: url('#{$item}.jpg');
    }
}

For loops

@for $i from 1 through 4 {
    .item-#{$i} { left: 20px * $i; }
}
Comments