css - SASS 循环以输出具有唯一编号和背景图像的类

Question

我偶然发现了一种 SASS 循环会很棒的情况。我有一个负载 <div>的，每个都有一个独特的类，遵循 .band-(number) 的模式，我的 HTML 的简化版本看起来像这样......

<div class="band-1"></div>
<div class="band-2"></div>
<div class="band-3"></div>
etc.

这些元素中的每一个都有一个唯一的 background-image ，但图像的命名约定遵循 div 的命名约定s 自己。我的 CSS 需要输出这个...

.band-1 {
   background-image:url('../img/image_01.png');
}
.band-2 {
   background-image:url('../img/image_02.png');
}
.band-3 {
   background-image:url('../img/image_03.png');
}

我将如何以简洁的方式输出它？提前致谢。

Answer 1

您可以通过 for 解决您的问题环形:

@for $i from 1 through 15 {
  @if $i < 10 {
    .band-#{$i} { 
      background-image:url("../img/image_0#{$i}.png");
    }
  } @else {
    .band-#{$i} { 
      background-image:url("../img/image_#{$i}.png");
    }    
  }
}

DEMO