递增背景图像ID与萨斯

Question

我有显示的背景图像的一类：

@media all and (min-width: 31.25em) { 
    .switch-image { 
     display:block; 
     background-image: url(/asset/img/img-1.png); 
     background-repeat: no-repeat; 
     background-position: center; 
    } 
} 

我的问题是，我有大约30的图像（img-1.png到img-30.png）

如何能我省了不用写上面30次。

我可以通过上述循环并增加panel-11所以panel-2？

Answer 1

您可以使用@for看：

@media all and (min-width: 31.25em) { 
    @for $i from 1 through 30 { 
    .switch-image-#{$i} { 
     display:block; 
     background-image: url(/asset/img/img-#{$i}.png); 
     background-repeat: no-repeat; 
     background-position: center; 
    } 
    } 
} 

希望它能帮助。

问候。