Question

我只想按照以下方式组织我的工作：

创建非常基本的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;
}

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

是否可以执行上述内容以及如何执行？

Answer 1

纯css不可能。你需要研究一下CSS预处理器。两个流行的名为 Sass 和 Less 。这些链接应该为您提供更多信息：

Sass
Less

这将帮助您开始解决您的具体问题：

including another class in Sass

Answer 2

.navbar {
    .colorRed;
    .backgroundColorGreen;
}

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

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

请注意，旁边的班级名称和点.之间没有空格。

CSS类可以包含另外两个类

2 个答案: