有没有办法重用/压缩CSS,使其更小,更清洁？

Question

我在外部CSS文件中有以下样式.

.callButton {
  width: 100px;
  height: 25px;
  float: right;
  /* other styles here */
  background-img: url('images/callButton.png');
}

.otherButton {
  width: 100px;
  height: 25px;
  float: right;
  /* same styles from callButton here */
  background-img: url('images/otherButton.png');
}

/* 5 more similar buttons */

如您所见,只有属性background-img不同,但我要为每个属性使用不同的类.有没有什么方法可以为公共属性使用相同的类,并为属性使用不同的(如变量)background-img？

Answer 1

你会想要这样的东西,可以解决这个问题:

.button {
    width: 100px;
    height: 25px;
    float: right;
}

.callButton {
    background-img: url('images/callButton.png');
}

.otherButton {
    background-img: url('images/otherButton.png');
}

然后,将您的HTML更改为:

<span class="button otherButton"></span>