我怎样才能制作一个 css class 这是对另一个的修改？

Question

我正在使用 google 的 MDL 制作一个简单的网站。我在网站上有很多按钮，在几个不同的页面上，我希望它们看起来都一样。起点是在按钮中包含一些 MDL 样式，如下所示：

<button class="mdl-button" style="..."/>

这很好，但我想在默认的 mdl 样式上为按钮添加一些额外的功能。我想做类似的事情：

.my_button_style {
    ... include mld-button style
    ... include mdl-xxx style
    ... other css parameters here
}

我做了一些挖掘，但似乎没有办法在创建新的 css 类时继承属性，使用标准 CSS（没有使用类似 LESS 的东西）。

我觉得这很疯狂。

我在 MDL 网站上看到很多示例，例如：

<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
  <i class="material-icons">add</i>
</button>

如果您希望所有按钮看起来都像那样，您真的必须将每一种样式都添加到整个站点的每个按钮实例吗？为什么 CSS 开发人员不带着干草叉和火炬前往山景城？我错过了一些很明显的东西吗？

Answer 1

It appears that there is no way to inherit properties from other CSS classes when creating a new one, using standard CSS

没错。

很难证明某个功能不存在，但您在任何 CSS 规范中搜索任何此类功能都是徒劳的。

由于您似乎对涉及在 HTML 水平上组合的正交类的任何设计理念持抵触态度，因此我不会花费任何额外的时间来尝试推动该方法，或证明 "omission" 从 CSS 规范扩展类是合理的。

与此同时，您可以查看 https://tabatkins.github.io/specs/css-extend-rule/，但这不是我所知道的任何现有或拟议规范的一部分。无论如何，这个提议本身的存在可能被认为是 "proof" 那 @extends 已经不是 CSS 任何地方的一部分。

虽然我个人不推荐使用 SASS，但还有其他预处理器框架以较少侵入的方式提供 extends。如果您的应用程序已经使用任何类型的构建过程，则添加诸如预处理步骤根本不应该是 "cumbersome"，并且很可能只涉及向某些配置文件添加几行。例如，您可以查看 https://github.com/travco/postcss-extend.

我怎样才能制作一个 css class 这是对另一个的修改？

How can I make a css class that is a modification of another?

html

css

material-design-lite