Question

我使用谷歌的MDL作为我正在制作的简单网站。我在网站上有很多按钮，在几个不同的页面上，我希望所有人都有相同的感觉。起点是在按钮中包含一些MDL样式，如下所示：

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

这很棒，但我希望在默认的mdl样式上为按钮添加一些额外的功能。我想做点什么：

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

我已经完成了一些挖掘，但似乎在使用标准CSS（不使用像LESS这样的东西）创建新的css类时，无法继承其他css类的属性。

这对我来说似乎很疯狂。

我在MDL网站上看到了很多例子：

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

如果您希望所有按钮看起来都像那样，您是否真的必须将每个样式添加到整个站点的每个按钮实例中？为什么CSS开发人员不会使用干草叉和火把进入山景城？我错过了一些非常明显的东西吗？

Answer 1

使用标准CSS
时，似乎无法在创建新类时继承其他CSS类的属性

这是正确的。

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

由于您似乎对设计哲学的任何概念都有抵触，这些概念涉及在HTML级别上组合的正交类，因此我不会花费任何额外的时间来尝试激发该方法，或证明从“扩展类”的“省略” CSS规范。

与此同时，您可以查看https://tabatkins.github.io/specs/css-extend-rule/，但这不是我所知道的任何现有或建议规范的一部分。无论如何，这个提案本身的存在可以作为“证明”@extends在任何地方都不是CSS的一部分。

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

如何创建一个修改另一个的css类？

1 个答案: