当对象具有CSS类时，应用多个CSS类

Question

我有一个导入的库，其中包含允许我自定义它的部分：

/* Color setup */
/* You are free to change all of this */
.success{
    background-color: yellowgreen;
    color: white;
}

这是弹出窗口的颜色设置。现在我希望这种颜色设置使用bootstrap的颜色设置。为实现这一目标，我的解决方案是：

/* Color setup */
/* You are free to change all of this */
.success{
    addClass: "popup alert-error alert"; //bootstrap classes
}

这可能吗？或者我应该在这里复制和粘贴bootstrp的代码？我真的很讨厌这个解决方案，因为它违反了DRY原则。

Answer 1

要默认为.success类的Bootstrap颜色，只需删除：

.success{
    background-color: yellowgreen;
    color: white;
}

要向弹出动态添加其他类，您可以使用jQuery（因为您正在运行Bootstrap）。

$('.success').addClass('popup alert-error alert');

这会将这些类添加到.success的所有实例中。所以略微更多的描述会有所帮助。

如果不需要动态完成，最好只需编辑HTML 。

<div class="success popup alert-error alert">...</div>

Answer 2

为什么不简单地在HTML中分配两个类？

<article class="success popup alert-error alert"> 

或者，这应该有用。

.success {
        .popup alert-error alert;
          }