类之间的 CSS“共享”样式答案

【问题标题】：CSS "sharing" style between classes类之间的 CSS“共享”样式
【发布时间】：2017-10-11 14:58:25
【问题描述】：

我想知道这是否可能。我想在 CSS 文件中定义一个属性，例如 body 的背景颜色，然后指定一个具有相同颜色但从 body 继承的输入按钮......像这样......

body {
    background-color: #0000AA;
    font-size: 12px;
    color: #FFFFFF;
}

input[type="button"] {
    background-color: body.background-color;
}

因此，当我更改正文的背景颜色时，输入按钮也会更改。有可能吗？

谢谢。

【问题讨论】：

Sass 非常适合这样的事情，我强烈建议学习它，或者 LESS。

标签： css input styles

【解决方案1】：

不准确，但CSS Custom Properties（也称为 CSS 变量）可以实现类似的效果。

对现代浏览器（包括 Edge）的支持非常好，但没有 IE。

body {
  --main-bg-color: brown;
  background-color: var(--main-bg-color);
  font-size: 12px;
  color: #FFFFFF;
}

input[type="button"] {
  background-color:var(--main-bg-color);
  color: white;
}

&lt;input type="button" value="Button" /&gt;

【讨论】：

【解决方案2】：

怎么样：

body, input[type="button"] {
    background-color: #0000AA;
}

body {
    font-size: 12px;
    color: #FFFFFF;
}

您可能还想看看SCSS variables

【讨论】：

我总是这样做...但是在我的应用程序中，此刻，我必须更改所有这些颜色，我想看看是否有可能定义一次颜色，然后另一个使用在另一种 CSS 样式中定义的相同样式（例如具有面向对象的 CSS）。
@DanieleComandini 好的，请参阅更新的答案以获得更好的解决方案。