一个 CSS 类可以包含其他两个类吗答案

【问题标题】：Can a CSS class contain two other classes一个 CSS 类可以包含其他两个类吗
【发布时间】：2014-04-21 16:33:14
【问题描述】：

我刚想按如下方式组织我的工作：

创建非常基本的 CSS 类，例如：

.backgroundRed {
    background-color:red;
}


.backgroundGreen {
    background-color:green;
}


.fixed300 {
    width:300px;
}

.percent100 {
    width: 100%;
}

.centered {
    margin: auto;
}

.centeredTextHorizontally {
    text-align:center;
}

.colorWhite {
    color:white;
}

然后同时使用其中的 2-3-4 个，来创建我想要的，例如：

<div class = "backgroundGreen fixed300 centered">
<div class="centeredTextHorizontally">300px wide green stripe with centered text</div>
<div class="centeredTextHorizontally colorWhite">Centered white text</div>
</div>
</div>

我相信你明白了。

现在的问题是，如果将来我们想更改网站，我们需要编辑所有这些 DIV 的 HTML，这首先打破了使用 CSS 的初衷。

所以我希望能够如下定义 CSS 类

.navbar {
.colorRed;
.backgroundColorGreen;
}

etc 等等。例如，如果需要更改网站颜色，我只更改 .navbar 而不是 HTML 中的 DIV。

是否可以执行上述操作以及如何执行？

【问题讨论】：

标签： html css class

【解决方案1】：

.navbar {
    .colorRed;
    .backgroundColorGreen;
}

这不是 css 规则。您必须使用如下类 -

.navbar.colorRed.backgroundColorGreen {
    /* Your css styles */
}

注意，类名和旁边的点.之间没有空格。

【讨论】：

【解决方案2】：

使用纯 css 是不可能的。您将需要查看 CSS 预处理器。两个流行的称为 Sass 和 Less。这些链接应该为您提供有关它们的更多信息：

Sass
Less

这将帮助您着手解决您的具体问题：

including another class in Sass

【讨论】：

为了给出更公平和全面的答案，还应提及LESS等其他工具。
使用 CSS 预处理器（如 SASS 或任何其他工具）的开销是多少？
或者简单地说CSS preprocessor 比如sass,less,stylus
@dewd 大多数构建过程将编译 Less/Sass/etc。在部署之前将代码转换为 CSS，然后在生产/实时环境中使用，这样就不必在页面加载时即时完成。
@dewd 不，这只是文本文件。除非您有巨大的样式文件，但这表明存在其他问题:)。