bootstrap 主题——如何删除重复的样式？

Question

这个问题与其说是代码问题，不如说是最佳实践问题。我正在开发一个基于 https://github.com/HackerThemes/theme-kit 的自定义 bootstrap 主题。我有一个我喜欢的工作主题，但是，我覆盖了原始 Bootstrap 主题中的一些样式。即使在缩小的 CSS 中，这些也是重复的。例如，Bootstrap 定义...

.btn-danger:hover {
    color: #fff;
    background-color: #ae130b;
    border-color: #a2120a;
}

...但我的代码还定义...

.btn-danger:hover {
    border-color: #0000;
}

在最终的样式表中，这两种样式都存在。第二种样式覆盖 Bootstrap 并且 看起来 很好。但是，这会导致无用的代码。首先，是否有某种后处理器可以与 Gulp 一起使用来消除这些重复项并合并它们？其次，我是否应该直接fork Bootstrap 存储库并直接修改原始SCSS？

Answer 1

这取决于你@import。查看 mytheme.scss，导入了 entire Bootstrap SASS，在最后的 CSS 中创建了完整的重复代码。

相反，您可以 pick specific SASS files to import and look at the option variables 这也会影响生成 CSS 的内容。例如，设置 $enable-grid-classes: false 将防止在生成的 CSS.

中复制整个网格系统

bootstrap 主题——如何删除重复的样式？

boostrap theming -- How to remove duplicate styles?

css

themes

sass

twitter-bootstrap

bootstrap-4