如何将多个 css 类选择器合并为一个？答案

【问题标题】：how to combine multiple css class selectors into one?如何将多个 css 类选择器合并为一个？
【发布时间】：2014-10-12 09:57:55
【问题描述】：

我有几个选择器类，例如

我必须在我的 html 中的几个元素中使用它们

样本

<div class="rt-grid-6 largemargintop rt-left">
    ...
</div>
<div class="rt-grid-6 largemargintop rt-left">
    ...
</div>
...

所以这是重复的并且难以管理，如果我必须添加或删除一个类，那么我必须更新所有出现的情况

所以我在想下面提到的 css 是否可以通过某种方式实现

.item
{
    rt-grid-6; //refer to the mentioned class
    largemargintop;
    rt-left;
}

我可以像下面的示例一样使用它们

<div class="item">
    ...
</div>
<div class="item">
    ...
</div>
...

我可以为相同的值定义一个新的 .item 类，但问题是我不能更改现有的类，同时我必须使用各自类中定义的样式。

我不能少用，因为我不能重新定义样式或访问资源。我只收到一个编译后的 css 以按原样使用。

那么有什么可能的方法可以实现我的期望吗？

按照我提到的方式可能不需要解决方案，但我想增加维护，以便更容易从单点向所需元素添加或删除类。

【问题讨论】：

【解决方案1】：

只有CSS 是不可能的。您必须使用 CSS 编译器，例如 SASS 或 LESS。

SASS 的示例：

.item
{
    @extend .rt-grid-6; //refer to the mentioned class
    @extend .largemargintop;
    @extend .rt-left;
}

非常简单！

在SASS 中，您可以使用变量等等！非常好用。

【讨论】：

这看起来很棒！看来我需要安装软件。可以只做网页吗？
是的。例如，您可以使用sassmeister.com。您也可以使用SASS 框架，如Compass，它对浏览器兼容性很有用。一些框架如Symfony 与SASS 兼容以自动编译。我建议你学习SASS！ :)。 See this example!.

【解决方案2】：

由于你不能使用less或sass，你可以做的是使用一个临时的css类名并使用jQuery替换它，如下代码，

HTML

<div class="temp-class">aaaaaaaaaaaaaa</div>
<div class="temp-class">bbbbbbbbbbb</div>

$(".temp-class").attr("class", "rt-grid-6 largemargintop rt-left");

【讨论】：

【解决方案3】：

尝试使用 SASS / LESS 来克服这个问题。你用的不行

【讨论】：