这是使用 Bootstrap mixins 所必需的吗？

Question

我是 LESS 和 Bootstrap 的新手，我对我的 css 文件的结果感到困惑。

我的基本目标是在我自己的 css 文件中使用 bootstrap 中的 mixins 和变量。

据我了解，该过程是获取较少的文件，将它们导入项目，然后import 引导参考。所以此时我可以在我自己的 css 文件中使用 mixins。

例子：

@import "less/bootstrap.less";

.myRow{
    .make-row();
}

但是现在我在 myCustomStyles.css 中有 7400 多行样式。这个对吗”？我不明白为什么它实际上会导入所有样式。我的理解是……我有对 bootstrap.min.css CDN 或本地的参考。然后 myCustomStyles.css 将被包含在内并覆盖默认值。

我想我对如何利用 CDN 并仍然在引导程序中使用 mixins 和变量感到困惑？

我参考了以下两篇文章：

http://www.helloerik.com/bootstrap-3-less-workflow-tutorial
http://www.codeproject.com/Articles/594098/How-to-customize-Twitter-Bootstrap-to-fit-your-web

Answer 1

Bootstrap.less 是完整的引导程序实现。它将拥有所有变量和 mixin 来构建整个 CSS 以进行引导。如果您不想要这个，那么您可能应该挑选并选择要包含的 LESS 文件。您可能需要变量和 mixins，所以您可能只需要导入 variables.less 和 mixins.less 就可以了？

如果您查看 bootstrap.less，它看起来像这样：

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

// Reset
@import "normalize.less";
@import "print.less";

// Core CSS
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";

// snip...

这不过是对其他 .less 文件的一堆导入。每个文件都特定于它正在做什么。至少我认为你需要变量和可能的 mixins。 Normalize 会重置 CSS。 Grid 定义了网格类等。

Answer 2

可能从 LESS 1.5 开始

您可以指定只希望代码作为参考，如下所示：

@import (reference) "less/bootstrap.less";

.myRow{
    .make-row();
}

(reference) 的添加告诉 LESS 通过不将代码编译为 CSS 来导入它。这允许您将整个引导程序用于混合引用目的，但避免添加所有代码。当然，需要知道这可能如何影响实现，因为引导程序的某些部分期望某些代码到位正常工作。但这完全是另一回事。