有没有办法让 HTML 代码独立于 CSS class 名称的变化？

Question

我正在使用 Twitter Bootstrap 3 for a while, but now Twitter Bootstrap 4 is coming. And new Twitter Booststrap comes with some changes，例如将 .table-condensed 重命名为 .table-sm。为了将来可能从当前版本迁移到未来版本，有没有办法使 HTML 代码独立于 CSS class 名称的更改？例如，如果我有 .table-condensed class，有没有办法创建我自己的 class table-small 并从现有 Twitter Bootstrap 的 [=29] 创建它=] table-condensed?类似于（伪代码）：

.table-small {
    join(".table-condensed")
}

我只使用纯 CSS 直到这一刻（我偶尔是前端开发人员而不是全栈:)），如果有人会回答我如果这件事在某种程度上是可能的，也许使用预处理器或类似的东西，我将非常感激 - 提前谢谢你！

Answer 1

如果您正在使用 SASS，那么您可以使用 @extend 函数。

但是，建议避免这样做，因为它会将选定的 class 复制到新的 class 中，因此，从本质上讲，会使 CSS

的大小加倍

解决方案是不升级到 BS-4，除非您有要求。或者在您

时更新所有 HTML

编辑

通读 SASS docs，似乎功能已更改为使用逗号语法。因此，这将是您今后的最佳选择。

通过将 class 的数量加倍，它仍然会产生多余的 CSS，但不会像复制所有 CSS

那样糟糕

Answer 2

您可以使用 less css 并执行以下操作：

.table-small {
    &:extend(.table-condensed);
}

这不会像 sass 那样复制 class，而只是添加选择器：

生成css:

.table-condensed,
.table-small {
    background: red;
}

预处理器在线：http://lesscss.org/less-preview/

有没有办法让 HTML 代码独立于 CSS class 名称的变化？

Is there a way make HTML code independent from changes in CSS class names?

html

css

twitter-bootstrap-3

twitter-bootstrap-4

bootstrap-4