css - 具有相似背景图像名称的多个 div

Question

嘿，我想简化这段 sass 代码

.btn1
   background-image: url(../images/other-services-1.jpg)

.btn2
   background-image: url(../images/other-services-2.jpg)

.btn3
   background-image: url(../images/other-services-3.jpg)

.btn4
   background-image: url(../images/other-services-4.jpg)

.btn5
   background-image: url(../images/other-services-5.jpg)

.btn6
   background-image: url(../images/other-services-6.jpg)

.btn7
   background-image: url(../images/other-services-7.jpg)

.btn8
   background-image: url(../images/other-services-8.jpg)

看来应该有替代方案 应该更容易和更快地应用 但我想不出一个

有什么建议吗？

Answer 1

已测试并且可以工作:

@for $i from 1 through 8
  .btn#{$i}
    background-image: url(../images/other-services-#{$i}.jpg)

测试于:http://www.sassmeister.com/ (确保您的站点设置为 SASS 和 NOT SCSS)

生成此 css:

.btn1 {
  background-image: url(../images/other-services-1.jpg);
}

.btn2 {
  background-image: url(../images/other-services-2.jpg);
}

.btn3 {
  background-image: url(../images/other-services-3.jpg);
}

.btn4 {
  background-image: url(../images/other-services-4.jpg);
}

.btn5 {
  background-image: url(../images/other-services-5.jpg);
}

.btn6 {
  background-image: url(../images/other-services-6.jpg);
}

.btn7 {
  background-image: url(../images/other-services-7.jpg);
}

.btn8 {
  background-image: url(../images/other-services-8.jpg);
}