Less和Sass是以有价值的方式扩展CSS语言的CSS预处理器。他们提供的众多改进中只有一项是您正在寻找的选项。Less有一些非常好的答案，我将添加Sass解决方案。

Sass具有扩展选项，允许一个类完全扩展到另一个类。有关扩展的更多信息，请参阅本文

我认为这是一个更好的解决方案：

[class*=“button-“] {
  /* base button properties */
}
.button-primary { ... }
.button-plain { ... }

CSS并没有真正做到你所要求的。若你们想在写规则的时候考虑到这个复合的想法，你们可能想看看指南针。这是一个样式表框架，看起来类似于前面提到的Less。

它让你做调酒和所有的好生意。

是的，但不完全符合这个语法。

.composite,
.something { display:inline }

.composite,
.else      { background:red }

在特定情况下，可以执行“软”继承：

.composite
{
display:inherit;
background:inherit;
}

.something { display:inline }
.else      { background:red }

这仅在将.composite类添加到子元素时有效。它是“软”继承，因为任何未在.composite中指定的值都不会明显继承。请记住，简单地写“inline”和“red”而不是“inherit”仍然会减少字符数。

以下是财产列表，以及它们是否自动执行此操作：https://www.w3.org/TR/CSS21/propidx.html

有一些类似LESS的工具，它允许您在类似于所描述的更高抽象级别上编写CSS。

更少的人称这些为“混合”

而不是

/* CSS */

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

你可以说

/* LESS */

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}