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

Posted 2023-03-06

【中文标题】一个 CSS 类可以包含其他两个类吗

【英文标题】：Can a CSS class contain two other classes

【发布时间】：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。

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

【参考方案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 不，这只是文本文件。除非您有巨大的样式文件，但这表明存在其他问题:)。