Question

我暂时使用Twitter Bootstrap 3，但现在 Twitter Bootstrap 4即将来临。新的Twitter Booststrap comes with some changes，例如将.table-condensed重命名为.table-sm。为了将来可能从当前版本迁移到未来版本，有没有办法使HTML代码独立于CSS类名称的更改？例如，如果我有.table-condensed类，有没有办法创建我自己的类table-small并从现有Twitter Bootstrap的类table-condensed创建它？像（伪代码）：

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

直到这一刻我才使用纯CSS（偶尔我是前端开发人员，而不是全栈:)），如果有人在某种程度上甚至可以使用preproccesors来回答我或类似的东西，我将非常感激 - 提前谢谢你！

Answer 1

如果您正在使用SASS，则可以使用@extend功能。

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

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

修改

通过SASS docs阅读，似乎功能已更改为使用逗号语法。所以这将是你未来的最佳选择。

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

Answer 2

您可以使用更少的CSS并执行以下操作：

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

这不像sass那样复制类，只是添加了选择器：

生成的css：

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

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

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

2 个答案: