如何创建一个包含其他类的 CSS 类以防止重复多个 CSS 类？答案

【问题标题】：How to create a CSS class that includes other class to prevent repeating multiple css class?如何创建一个包含其他类的 CSS 类以防止重复多个 CSS 类？
【发布时间】：2015-08-25 03:23:02
【问题描述】：

我有一个 CSS 列表，它们的组合给了我想要的结果。然而，我发现自己在重复这个列表。例如

<div id="div1"><h4 class="muted-text text-center cursive text"> Text 1</h4></div>
<div id="div2"><h4 class="muted-text text-center cursive text"> Text 2 </h4></div>
<div id="div3"><h4 class="muted-text text-center cursive text"> Text 3</h4></div>
<div id="div4"><h4 class="muted-text text-center cursive text"> Text 4</h4></div>

我希望能够这样做：

<div id="div1"><h4 class="portfolio-title"> Text 1</h4></div>
<div id="div2"><h4 class="portfolio-title"> Text 2</h4></div>
<div id="div3"><h4 class="portfolio-title"> Text 3</h4></div>
<div id="div4"><h4 class="portfolio-title"> Text 4</h4></div>

我正在使用引导程序提供的类（静音文本和文本中心）以及我自己的草书文本的组合，该草书文本本身也可以在其他地方使用。

如何在css文件中实现我所需要的？

感谢您的帮助。

【问题讨论】：

我认为您不能仅使用 CSS 来做到这一点。您将需要 LESS 或 SASS 之类的东西。
@azeós 我认为他可以，只需将这些类的所有属性写入一个并使用它:)

标签： html css twitter-bootstrap dry

【解决方案1】：

只做你自己的课。

.portfolio-title {
  color: #dddddd;
  text-align: center;
  font-family: cursive;
}

或者使用 SASS。如果您要重复使用此基类，您可能希望在此处使用占位符

%title {
  color: #dddddd;
  text-align: center;
  font-family: cursive;
}

.portfolio-title {
  @extend %title
}

.other-class {
  @extend %title
}

输出会是这样的：

.portfolio-title, .other-class {
  color: #dddddd;
  text-align: center;
  font-family: cursive;
}

【讨论】：

【解决方案2】：

试试SASS。您可以创建一个 mixin、扩展一个类或在另一个类中包含一个类。

【讨论】：

【解决方案3】：

使用普通的旧 CSS 很容易做到这一点。只需将您需要的选择器链接在一起。

.muted-text.text-center.cursive-text {color: red;}
h4.muted-text.text-center.cursive-text {color: blue;}

或者只是在您的新作品集标题下添加所需的样式。两者都显示在此示例中 - https://jsfiddle.net/7wt5eb9t/1/ - 因此只需弄清楚哪种方式可以节省您的项目时间。

而且由于这些规则比仅适用于一个类的 CSS 规则更具体，因此无论它们是在“.muted-text”或“.text-”等基本 CSS 规则之前还是之后列出，它们都将具有优先权。中心”。

【讨论】：