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

Answer 1

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

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

使用2个或更多课程。 OOCSS，SMACSS或BEM将是很好的工具。

.button { ... }

.button - red {color：red; }

或者你可以用sass，less或stylus中的@extend运算符实现这一点。

Answer 4

我建议使用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 5

只需使用CSS：

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

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

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

有没有办法分享常见的CSS类？

5 个答案: