Bootstrapvariables用LESS覆盖
我一直在调查整整一天，因为我认为花一些时间学习定制Bootstrap的最佳做法是值得的。
我可以看到，有一个友好的网页可用于从http://twitter.github.io/bootstrap/customize.html有select地自定义元素，但我想有更多的控制而不触及原始的引导源文件。
首先，我基本上想要testing从12到16列更改网格，并做到这一点，我创build了我自己的variablesless文件，并添加@ gridColumns：16; 只有这个文件，并导入这个自定义较less内部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文件来获得新的bootstrap.css重写variables导入调用，并链接到HTML文件的CSS，但网格不会更改为16列。
任何人都可以指出我做错了什么？
我在一个类似的项目上工作，我们在“第三方”位置引导，然后只覆盖mixins.less和variables.less 。 我们使用的模式添加了三个文件，并且根本不触及引导（允许您轻松地放置replace）：
/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)
variables文件，这是你会覆盖网格的地方
/* * /style/shared/variables.less */ @import "../bootstrap-master/less/variables.less"; @gridColumns: 16; // let's pretend this is your site-specific override
实际导入的文件（或通过一个较less的编译器）：
/* * /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但实际上stream动值的工作，就像你期望的方式因为他们是通过简单的划分来计算的）。
我喜欢这个设置，因为我可以cd到bootstrap-master和git pull并获取新的更新，而不必合并任何特定的kludges（这也给我一个很好的处理，我已经实际覆盖）
另一件事是非常清楚shared.less是只使用grid.less（而不是所有的bootstrap）。 这是有意的，因为在大多数情况下，你不需要所有的引导程序，只需要几个部分就可以了。 大多数自举less的文件至less是很好的，因为他们唯一的硬依赖是shared.less和mixins.less
如果这仍然不起作用，那么也许WinLess变得困惑
导入原始bootstrap.less 后覆盖variables对我很有用：
@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';
