Sass动态风格,以避免重复

Question

我有一个动态角度指令,可以根据某些条件创建图像路径.

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张图像进行硬编码,这是很多重复.想知道是否有可能选择更好的替代方案？

Answer 1

非常简单与sass.你只需要一个for循环.

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