遞增背景圖像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; 
    } 
    } 
} 

希望它能幫助。

問候。