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

9 浏览
0 Comments

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

我有5个CSS类。它们完全相同，除了一行代码不同。有没有办法创建一个CSS类，然后让其他5个CSS类继承它，并只添加自己的特定内容？\n如下所示，唯一不同的一行代码是这行...\nbackground-image: url(\"../Images/vertTabsButton2.gif\");\n

\n 浮动：左侧;\n 边框样式：无;\n 边框宽度：细;\n 背景图片：url(\"../Images/vertTabsButton1.gif\");\n 背景重复：不重复;\n 背景定位-x：居中;\n 背景定位-y：顶部;\n 宽度：215像素;\n 高度：700像素;\n 外边距：0像素自动;\n 内边距：0像素;\n 文本对齐：居中;\n

\n

\n 浮动：左侧;\n 边框样式：无;\n 边框宽度：细;\n 背景图片：url(\"../Images/vertTabsButton2.gif\");\n 背景重复：不重复;\n 背景定位-x：居中;\n 背景定位-y：顶部;\n 宽度：215像素;\n 高度：700像素;\n 外边距：0像素自动;\n 内边距：0像素;\n 文本对齐：居中;\n

0

3 答案

0 Comments

有时候我们在编写CSS样式时会发现有一些常用的类需要被多次使用，这样就会导致我们在多个地方重复编写相同的样式代码。为了解决这个问题，我们可以使用SASS或LESS这两种CSS预处理器语言。

下面是一个使用SASS和LESS的示例，来展示如何通过这两种预处理器语言来共享常用的CSS类：

在SASS中，我们可以定义一个名为.divMasterCol1Button1的类，并将其样式代码写在其中。然后，通过在另一个名为.divMasterCol1Button2的类中引用.divMasterCol1Button1类，我们可以继承.divMasterCol1Button1类的样式，并在此基础上进行修改。

在LESS中，同样可以使用类似的方式来共享常用的CSS类。我们也可以定义一个名为.divMasterCol1Button1的类，并在名为.divMasterCol1Button2的类中引用.divMasterCol1Button1类，以便继承其样式。

这样一来，我们就可以通过使用SASS或LESS来共享常用的CSS类，避免在多个地方重复编写相同的样式代码。这不仅可以提高开发效率，还能使代码更加整洁和易于维护。

个人而言，我更倾向于使用SASS，因为Bootstrap 4开始使用SASS作为其框架的预处理器语言。

总结起来，通过使用SASS或LESS这两种CSS预处理器语言，我们可以轻松地共享常用的CSS类，避免重复编写相同的样式代码，提高开发效率，并使代码更加整洁和易于维护。

0
0 Comments

在上述内容中，出现了一个问题，即如何共享常见的CSS类。为了解决这个问题，可以使用以下方法：

1.在HTML中使用相同的CSS类名来应用样式。例如，在给定的HTML代码中，两个按钮都使用了名为"commonProperties"的CSS类。这样可以确保两个按钮具有相同的样式属性。

2.在CSS中定义共享的样式属性。在给定的CSS代码中，使用了"commonProperties"类来定义一组共享的样式属性，如浮动、边框样式、边框宽度、背景重复、背景位置、宽度、高度、边距、填充和文本对齐方式。

3.为每个元素定义特定的样式。在给定的CSS代码中，"divMasterCol1Button1"和"divMasterCol1Button2"类分别定义了两个按钮的特定样式属性，如背景图像。

通过这种方法，可以将常见的CSS类与特定的CSS类结合使用，以实现样式的共享和个性化。这样做的好处是可以减少代码的重复，并提高代码的可维护性。

0
0 Comments

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

如果你想让`.divMasterCol1Button1`根据其配对的类具有不同的背景，你可以使用`.commonProperties.divMasterCol1Button1`来定义。

除了使用额外的类之外，你还可以像下面这样定义每个类的更多CSS属性：

.commonProperties {
  /* 共同属性 */
}
.divMasterCol1Button1 {
  /* 独特属性 */
}
.divMasterCol1Button2 {
  /* 独特属性 */
}

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

0