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); 
   }
}

Sass动态风格，以避免重复

1 个答案: