Question

Hay我想简化这个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)

Answer 2

经过测试并将继续工作：

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

经过测试：http://www.sassmeister.com/（确保您将网站设置为 SASS 和非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);
}

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

2 个答案: