用LESS覆盖Bootstrap变量

我整天都在进行调查，因为我认为花一些时间来学习定制Bootstrap的最佳实践是值得的。

我可以看到有一个友好的页面可用于从http://twitter.github.io/bootstrap/customize.html中有选择地自定义元素，但是我想拥有比这更多的控制权而不接触原始的引导程序源文件。

首先，我基本上想测试一下将网格从12列更改为16列的方法，为此，我创建了自己的变量less文件，并添加了@gridColumns：16;。仅将其导入到此文件中，并在bootstrap.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文件，以使用覆盖的变量import调用获取新的bootstrap.css，并将CSS与html文件链接在一起，但是网格不会更改为16列。

谁能指出我做错了吗？

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

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

mixins文件

/*
 *    /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感到困惑

导入原始文件后覆盖变量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

可以帮助某人的另一个示例：

@import 'bootstrap/bootstrap/variables';

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

@import 'bootstrap/bootstrap';

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