有没有一种方法可以共享常用的CSS类？

Question

我有5个CSS类。它们完全相同，除了一行不同。是否有一种方法创建一个CSS类，然后让这5个其他CSS类从这个类继承，并只添加自己特定的内容？

如下所示，您可以看到唯一不同的行是这一行...

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 {
  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;
}

- Roto

---

这可能会有帮助：CSS类可以继承一个或多个其他类吗？ - showdev

使用标准 CSS 规则，参见我的帖子。 - Pavel Gatnar

Answer 1

如果不使用像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");
}

- sdgluck

---

即将发布此内容。为了清晰起见，如果您想让.divMasterCol1Button1根据其配对的类别具有不同的背景，则可以使用.commonProperties.divMasterCol1Button1 { ... }。 - stvnrynlds

你能不能做类似于这个的东西？这个例子没有使用额外的类。只有定义的CSS属性会覆盖相同类别的现有属性。 - UltraSonja

你可以在每个类定义中拥有更多的CSS，详见我的帖子。 - Pavel Gatnar

@UltraSonja 当然可以，但是你展示的不严格属于“继承”，而是“级联”。 - sdgluck

为什么有人会想在CSS中使用继承呢？ - UltraSonja

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");
}

- Digvijay

---

我喜欢这个答案。它展示了CSS和HTML。谢谢。我会在周一尝试它。现在是周六，我正在练习放松。 - Roto

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");
}

这里是LESS

.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开始在他们的框架中使用它。

- hello world

Answer 4

只需使用CSS：

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

查看示例 http://jsfiddle.net/qj76455e/

我希望原则易于阅读，因此我使用了短的类名c1,...,c5，而不是divMasterCol1Button1等。

- Pavel Gatnar

Answer 5

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

.button { ... }

.button--red { color: red; }

或者你可以在Sass、Less或Stylus中使用@extend操作符来实现这一点。

- 0x860111