Sass动态样式以避免重复

我有一个动态角度指令，它根据一些条件创建图像路径

scope.image = 'myImage-test-'+imageIndex; //image index is a random num between 1-5

在我的指令模板中，

在我的scss文件中，我添加了以下样式来映射这些图像

   .container {
       &--myImage-test-1 {
            background: url(../images/image-1.jpg); 
       }
       &--myImage-test-2 {
            background: url(../images/image-2.jpg); 
       }
       &--myImage-test-3 {
            background: url(../images/image-3.jpg); 
       }
       &--myImage-test-4 {
            background: url(../images/image-4.jpg); 
       }
       &--myImage-test-5 {
            background: url(../images/image-5.jpg); 
       }
    }

---

我计划将我的图片数量增加到50个，我不喜欢硬编码所有这50个图片的样式，这是重复的。想知道是否有更好的替代方案？

使用sass非常简单。你只需要一个for循环

.container {
   //for loop 1-50 
   @for $i from 1 through 50 {
      &--myImage-test-#{$i} {
         background: url(../images/image-#{$i}.jpg); 
   }
}

---

很简单，用sass。你只需要一个for循环

.container {
   //for loop 1-50 
   @for $i from 1 through 50 {
      &--myImage-test-#{$i} {
         background: url(../images/image-#{$i}.jpg); 
   }
}