给定示例的SCSS方式如下：

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

.composite {
  @extend .something;
  @extend .else;
}

更多信息，请查看sass基础知识

不要将css类视为面向对象的类，将它们视为其他选择器中的一个工具，用于指定html元素的样式。将大括号之间的所有内容视为属性类，左侧的选择器告诉它们选择的元素从属性类继承属性。例子：

.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}

当一个元素被赋予属性class＝“foo”时，最好不要将其看作是从class.foo继承属性，而是从属性class A和属性class B继承属性。也就是说，继承图是一个层次，元素从属性class派生，选择器指定边的位置，以及当存在竞争属性时确定优先级（类似于方法解析顺序）。

编程的实际含义是这样的。假设您有上面给出的样式表，并希望添加一个新的类.baz，其中它应该具有与.foo相同的字体大小。最简单的解决方案是：

.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}
.baz { font-size : 2em; /* attribute class C, hidden dependency! */}

每当我要打两次字时，我都会很生气！我不仅要写两次，现在我没有办法用程序表示.foo和.baz应该具有相同的字体大小，而且我创建了一个隐藏的依赖项！我的上述范例建议我应该从属性类A中抽象出字体大小属性：

.foo, .bar, .baz { font-size : 2em; /* attribute base class for A */}
.foo, .bar { font-weight : bold; /* attribute class A */}
.foo { color : green; /* attribute class B */}

这里的主要抱怨是，现在我必须再次键入属性类A中的每个选择器，以指定它们应该选择的元素也应该继承属性基类A中的属性。然而，替代方法是，必须记住在每次发生更改时编辑每个存在隐藏依赖项的属性类，或者使用第三方工具。第一个选项让上帝发笑，第二个选项让我想自杀。

看看CSS合成：https://bambielli.com/til/2017-08-11-css-modules-composes/

根据他们的说法：

.serif-font {
    font-family: Georgia, serif;
}

.display {
    composes: serif-font;
    font-size: 30px;
    line-height: 35px;
}

我在我的反应项目中使用它。

一个元素可以包含多个类：

.classOne { font-weight: bold; }
.classTwo { font-famiy:  verdana; }

<div class="classOne classTwo">
  <p>I'm bold and verdana.</p>
</div>

不幸的是，这几乎和你会得到的一样接近。我希望有一天能看到这个特性以及类别名。

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

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

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

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

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

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

.composite,
.something { display:inline }

.composite,
.else      { background:red }