在多个 LESS 或 SASS 样式表中安全导入库答案

【问题标题】：Safe imports of libraries in multiple LESS or SASS stylesheets在多个 LESS 或 SASS 样式表中安全导入库
【发布时间】：2013-09-14 04:20:30
【问题描述】：

用例：
我有主样式表 - main.less 和另一个用于站点特定部分的样式表 - app.less。我也使用 Twitter Bootstrap。例如，在main.less 中，我有几个用于引导程序的覆盖，而在app.less 中，我想将 Bootstap 类混入我自己的类中（让我们采取 - .clearfix） - 让我的代码更加干燥。所以我将在其中导入bootstrap.css 并混入需要的类。首先在网页上，我将包含 Bootstrap 和其他库，然后是 main.less，然后是 app.less。这将使main.less 中的覆盖被清除，一切都变得一团糟！

如何正确进行此类导入？是否有可能使用任何 CSS 预处理器，而不仅仅是 LESS？

【问题讨论】：

Bootstrap（包括它的 Sass 端口）的编写方式是，除了简单的主题之外，other 的任何操作都会以包含各种内容的相当臃肿的样式表结束您既不想也不想使用的选择器。您需要更具体地了解您的问题，因为它目前过于广泛。

标签： html css twitter-bootstrap sass less

【解决方案1】：

您是否可以选择将引导程序包含在较少的文件中，就像您在开发中所做的那样？

我在 SCSS 中的做法是这样的：

style.scss（没有任何自己的声明）
- 首先导入 bootstrap.scss
- 然后导入站点特定的 .scss 文件，其中可能包含覆盖。

通过这样做，我可以完全控制文件的顺序，从而控制生成的 css 文件中的声明顺序。

当然，必须决定以让 Bootstrap 在包含时通过 CDN 加载的能力进行交易，但在我的情况下，我还是使用了一个非常缩小的 Bootstrap 版本。

【讨论】：

似乎除了将所有内容组合成一个大样式之外没有其他选择。
在 Less 中，您可以执行 @import (reference) bootstrap.less 之类的操作，它不会复制所有样式，而只是引用它们。

【解决方案2】：

Bootstrap 不适合那样使用。我的意思是如果你使用编译版本，你不应该覆盖它。这个想法是使用较少的文件并修改它们。您使用的方法有点混乱，我认为没有优雅的方法。我建议避免包含已编译的 bootstrap.css 并检查纯较少版本。

【讨论】：

"自定义 Bootstrap 组件需要时间，但应该简单明了。经常查看源代码并复制修改所需的选择器。将它们放在 Bootstrap 源代码之后可以轻松覆盖而不复杂" Bootstrap主页。所以这正是 Bootstrap 可以定制的方式，而定制外部库的来源对我来说听起来很晦涩。