如何將多個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來克服這個問題。 您使用的是行不通的