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

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

1 个答案: