1. 程式人生 > >sass的循環for,while,each

sass的循環for,while,each

rom tro pre ont check -i sele clas borde

1. for

@for $i from 1 to 10 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}

2. while

$i: 6;

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

3. each

@each $member in a, b, c, d {
  .#{$member} {
    background-image: url("/image/#{$member}.jpg");
  }
}

/*或者*/

$icon_name:user,pass,checked,select;

@each $i in $icon_name
{ .icon_#{$i}{ width: 10px; } }

sass的循環for,while,each