有没有办法共享常见的 CSS 类？ [复制]

Question

我有 5 个 CSS 类。除了一行之外，它们完全相同。有没有办法创建一个 CSS 类，然后让其他 5 个 CSS 类从该类继承，然后添加它自己的特定类？

正如您在下面看到的，唯一不同的是这一行...

背景图片：url("../Images/vertTabsButton2.gif");

.divMasterCol1Button1 {
  float: left;
  border-style: none;
  border-width: thin;
  background-image: url("../Images/vertTabsButton1.gif");
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  width: 215px;
  height: 700px;
  margin: 0px auto;
  padding: 0px;
  text-align: center;
}
.divMasterCol1Button2 {
  float: left;
  border-style: none;
  border-width: thin;
  background-image: url("../Images/vertTabsButton2.gif");
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  width: 215px;
  height: 700px;
  margin: 0px auto;
  padding: 0px;
  text-align: center;
}

Answer 1

简单地使用 CSS：

.c1,.c2,.c3,.c4,.c5{
  //common styles
}
.c1{
  //c1 special style
}
...
.c5{
  //c5 special style
}

参见示例http://jsfiddle.net/qj76455e/

我想让原理可读，因此我使用短类名 c1,...,c5 而不是 divMasterCol1Button1 等。

Answer 2

这是你的 HTML

<button class="commonProperties divMasterCol1Button1"/>
<button class="commonProperties divMasterCol1Button2"/>

这是你的 CSS

.commonProperties {
  float: left;
  border-style: none;
  border-width: thin;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  width: 215px;
  height: 700px;
  margin: 0px auto;
  padding: 0px;
  text-align: center;
}

.divMasterCol1Button2 {
  background-image: url("http://www.gettyimages.ca/gi-resources/images/CreativeImages/Hero-527920799.jpg");
}

.divMasterCol1Button1 {
  background-image: url("http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg");
}

Answer 3

我建议使用 SASS 或 LESS。这是一个例子，它看起来像你的类的两种预编译器语言

SCSS

.divMasterCol1Button1 {
  float: left;
  border-style: none;
  border-width: thin;
  background-image: url("../Images/vertTabsButton1.gif");
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  width: 215px;
  height: 700px;
  margin: 0px auto;
  padding: 0px;
  text-align: center;
}

.divMasterCol1Button2 {
     @extend .divMasterCol1Button1;
     background-image: url("../Images/vertTabsButton2.gif");
}

这里少了

.divMasterCol1Button1 {
  float: left;
  border-style: none;
  border-width: thin;
  background-image: url("../Images/vertTabsButton1.gif");
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  width: 215px;
  height: 700px;
  margin: 0px auto;
  padding: 0px;
  text-align: center;
}

.divMasterCol1Button2 {
    .divMasterCol1Button1;
    background-image: url("../Images/vertTabsButton2.gif");
}

我更喜欢 SCSS，因为 bootstrap 4 开始将它用于他们的框架.....

Answer 4

使用 2 个或更多类。 OOCSS、SMACSS 或 BEM 将是很好的工具。

.button { ... }

.button--red { 颜色：红色； }

或者您可以在 sass、less 或 stylus 中使用 @extend 运算符来实现此目的。

Answer 5

不使用pre-compiler like SASS 就无法实现继承。但是，您可以通过将通用属性拆分为单个类并通过其他 ID 或类应用剩余的唯一属性来完成您想要的某事。

.commonProperties {
  float: left;
  border-style: none;
  border-width: thin;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  width: 215px;
  height: 700px;
  margin: 0px auto;
  padding: 0px;
  text-align: center;
}

.divMasterCol1Button2 {
  background-image: url("../Images/vertTabsButton2.gif");
}

.divMasterCol1Button1 {
  background-image: url("../Images/vertTabsButton2.gif");
}