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

Question

我正在使用Twitter Bootstrap 3,但现在Twitter Bootstrap 4即将推出.而新Twitter Booststrap 配备了一些变化,如重命名.table-condensed来.table-sm为例子.为了将来可能从当前版本迁移到未来版本,有没有办法使HTML代码独立于CSS类名称的更改？例如,如果我有.table-condensed类,有没有办法创建自己的类table-small并从现有Twitter Bootstrap的类创建它table-condensed？像(伪代码)的东西:

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

我只使用纯CSS到这一刻(我偶尔是前端开发者而不是全栈:)),如果有人会回答我,如果这个东西甚至可能以某种方式,也许有预处理器或类似的东西,我会非常感谢 - 提前谢谢!

Answer 1

如果您使用 SASS 那么您可以使用该@extend函数。

但是，建议避免这样做，因为它将所选类复制到新类中，从而实质上使 CSS 大小加倍

解决方案是要么不升级到 BS-4，除非您有要求。或者在执行此操作时更新所有 HTML

编辑

通读SASS 文档，功能似乎已更改为使用逗号语法工作。所以这将是您未来的最佳选择。

它仍然会通过加倍类的数量来生成多余的 CSS，但不会像复制所有 CSS 那样糟糕