sass的循环for,while,each

Posted mengff

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了sass的循环for,while,each相关的知识，希望对你有一定的参考价值。

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的主要内容，如果未能解决你的问题，请参考以下文章