sass的循环for,while,each

Posted 2021-01-03 mengff

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;
  }
}