5

我使用Twitter Bootstrap 3有一段时间了，但现在Twitter Bootstrap 4来了。并且 newTwitter Booststrap 带有一些更改，例如重命名.table-condensed为.table-sm。为了将来可能从当前版本迁移到未来版本，有没有办法使 HTML 代码独立于 CSS 类名的更改？例如，如果我有.table-condensed类，有没有办法创建我自己的类table-small并从现有Twitter Bootstrap的类创建它table-condensed？类似（伪代码）：

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

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

4

2 回答 2

3

如果您使用的是 SASS，那么您可以使用该@extend功能。

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

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

编辑

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

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

于 2016-02-06T16:08:10.773 回答
1

您可以使用较少的 css 并执行以下操作：

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

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

生成的CSS：

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

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

于 2016-02-06T16:13:31.820 回答