如何将多个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

由于您不能使用更少或更少，所以您可以使用临时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");

演示版

Answer 3

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