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

我偶然发现了一个SASS循环很棒的情况.我有一个< div>的加载,每个都有一个遵循.band-(数字)模式的唯一类,我的HTML的简化版本看起来像这样……

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

这些元素中的每一个都具有唯一的背景图像,但图像的命名约定遵循div本身的命名约定.我的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');
}

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

解决方法

您可以使用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

原文地址：https://www.jb51.cc/css/217796.html