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

Question

我有几个选择器类，例如

• .rt-grid-6 { ... }
• .largemargintop { ... }
• .rt-left { ... }

我必须在我的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按原样使用。

那么有什么方法可以达到预期目标吗？

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

Answer 1

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

您可以看到指南：http://sass-lang.com/guide

SASS的示例：

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

很简单！

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

Answer 2

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

<强> HTML

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

<强> JS

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

Demo

Answer 3

尝试使用SASS / LESS来克服这个问题。你正在使用的东西不起作用