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仍然使用bootstrap中的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是完整的bootstrap实现。它将拥有所有变量和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文件的一堆导入。每个文件都特定于它正在做的事情。我认为你至少需要变量和mixin。 Normalize会重置CSS。网格定义了网格类等。

Answer 2

可能，因为LESS 1.5

您可以指定您只希望代码作为参考：

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

.myRow{
    .make-row();
}

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

这是否需要使用Bootstrap mixins？

2 个答案:

可能，因为LESS 1.5