使用 LESS 覆盖引导变量

Question

我已经调查了一整天，因为我认为值得花一些时间来学习自定义 Bootstrap 的最佳实践。

我可以看到有一个友好的页面可用于从 http://twitter.github.io/bootstrap/customize.html 选择性地自定义元素，但我希望在不触及原始引导源文件的情况下拥有比这更多的控制权。

首先，我基本上想测试将网格从 12 列更改为 16 列，为此，我创建了自己的变量 less 文件并添加了 @gridColumns:16;仅此文件并在 bootstrap.less 中导入此自定义 less，如下所示。

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";
**@import "../custom-variables.less"; //Override variables**

然后，我使用WinLess 编译了 bootstrap.less 文件以获取新的 bootstrap.css 并覆盖了变量导入调用，并将 css 与 html 文件链接，但网格不会更改为 16 列。

谁能指出我做错了什么？

Answer 1

一种简单的方法是覆盖样式文档中的样式，使用相同的名称，并将其标记为 !important。

Answer 2

另一个可能对某人有帮助的例子：

@import 'bootstrap/bootstrap/variables';

// Prgress bar
@progress-bar-bg: #f5f5f5;
@progress-bar-default-color: @gray-base;

@import 'bootstrap/bootstrap';

Answer 3

在导入原始 bootstrap.less 之后覆盖变量对我来说非常有用：

@import "less/bootstrap.less";

@body-bg:     red;
@text-color:  green;
@link-color:  blue;

编译上述 LESS 源代码输出正确定制的 Bootstrap CSS 代码。

相关信息：http://lesscss.org/features/#variables-feature-lazy-loading

Answer 4

我在一个类似的项目中工作，我们在“第三方”位置进行引导，然后仅覆盖 mixins.less 和 variables.less。我们为此使用的模式添加了三个文件，并且根本不涉及引导程序（允许您轻松放入替换）：

/style
|- bootstrap-master/
|    |- less/
|    |- js/
|   ...
|- shared/
    |- shared.less
    |- variables.less
    |- mixins.less

混合文件

/*
 *    /style/shared/mixins.less
 */

@import "../bootstrap-master/less/mixins.less";
// override any mixins (or add any of your third party mixins here)

变量文件，您可以在其中覆盖网格

/*
 *    /style/shared/variables.less
 */

@import "../bootstrap-master/less/variables.less";

@gridColumns: 16; // let's pretend this is your site-specific override

实际导入的文件（或馈送到更少的编译器）：

/*
 *    /style/shared/shared.less
 */

@import "variables.less";
@import "mixins.less";

@import "../bootstrap-master/less/grid.less";
//and any other bootstrap less files we need here

在我的设置中，如果我这样做，我会得到一个带有一些奇怪的 .span15 值的 css 文件（因为我没有更新 @gridColumnWidth 或 @gridGutterWidth 但 .row-fluid 值实际上就是这样你会期望它们，因为它们是通过直接除法计算的）。

我喜欢这种设置，因为我可以 cd 进入 bootstrap-master 和 git pull 并获取新的更新，而无需合并我的任何特定 kludges（它也让我能够很好地处理我实际覆盖的内容）

另一件事是，很明显 shared.less 仅使用 grid.less（而不是所有引导程序）。这是有意的，因为在大多数情况下，您不需要所有引导程序，只需要其中的一部分即可。大多数无引导文件至少很好，因为它们唯一的硬依赖是shared.less 和mixins.less

如果这仍然不起作用，那么可能是 WinLess 感到困惑