twitter-bootstrap 使用 LESS 覆盖引导变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16350779/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap variable overriding with LESS
提问by Seong Lee
I have been investigating for the whole day as I considered it would be worthwhile spending some time to learn best practice for customizing Bootstrap.
我已经研究了一整天，因为我认为花一些时间学习自定义Bootstrap 的最佳实践是值得的。
I can see that there is a friendly page available for customizing elements selectively from http://twitter.github.io/bootstrap/customize.htmlbut I want to have more control than this without touching original bootstrap source files.
我可以看到有一个友好的页面可用于从http://twitter.github.io/bootstrap/customize.html选择性地自定义元素，但我希望在不触及原始引导源文件的情况下拥有更多控制权。
To start with, I basically wanted to test out changing the grid from 12 to 16 columns and to do this, I created my own variable less file and added @gridColumns:16; only to this file and imported this custom less inside bootstrap.less as follows.
首先，我基本上想测试将网格从 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**
Then, using WinLessI compiled the bootstrap.less file to get new bootstrap.css with overridden variable import call and linked the css with html file but the grid won't change to 16 columns.
然后，使用WinLess，我编译了 bootstrap.less 文件以获取具有覆盖变量导入调用的新 bootstrap.css 并将 css 与 html 文件链接，但网格不会更改为 16 列。
Can anyone please point out what I am doing wrong?
谁能指出我做错了什么？
采纳答案by Marcos
I work on a similar project where we have bootstrap in a 'third-party' location and then override only mixins.lessand variables.less. The pattern we use for this adds three files and doesn't touch bootstrap at all (allowing you to drop in replacements easily):
我在一个类似的项目中工作，我们在“第三方”位置有引导程序，然后只覆盖mixins.less和variables.less。我们为此使用的模式添加了三个文件并且根本不涉及引导程序（允许您轻松插入替换）：
/style
|- bootstrap-master/
| |- less/
| |- js/
| ...
|- shared/
|- shared.less
|- variables.less
|- mixins.less
the mixins file
混合文件
/*
* /style/shared/mixins.less
*/
@import "../bootstrap-master/less/mixins.less";
// override any mixins (or add any of your third party mixins here)
the variables file, which is where you would override grids
变量文件，您可以在该文件中覆盖网格
/*
* /style/shared/variables.less
*/
@import "../bootstrap-master/less/variables.less";
@gridColumns: 16; // let's pretend this is your site-specific override
The file which is actually imported (or fed through to a less compiler):
实际导入的文件（或馈送到较少的编译器）：
/*
* /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
in my setup, if i do this, i get a css file with some weird .span15 values (since i didn't update @gridColumnWidthor @gridGutterWidthbut the .row-fluid values actually work out just the way you'd expect them to since they're calculated by straightforward division).
在我的设置中，如果我这样做，我会得到一个带有一些奇怪的 .span15 值的 css 文件（因为我没有更新，@gridColumnWidth或者@gridGutterWidth.row-fluid 值实际上按照你期望的方式工作，因为它们）通过直接除法重新计算）。
I like this setup because i can cdinto bootstrap-master and git pulland fetch new updates without having to merge any of my specific kludges (it also gives me a good handle on what i've actually overridden)
我喜欢这个设置，因为我可以cd进入 bootstrap-master 并git pull获取新的更新，而不必合并我的任何特定的 kludges（它也让我很好地处理了我实际覆盖的内容）
The other thing is that it's very clear that shared.less is only using grid.less (rather than all of bootstrap). This is intentional since in most instances you don't need all of bootstrap, just a few parts of it to get going. Most bootstrap less files at least are nice in that their only hard dependencies are shared.lessand mixins.less
另一件事是很明显 shared.less 仅使用 grid.less （而不是所有引导程序）。这是有意为之，因为在大多数情况下，您不需要所有引导程序，只需其中的几个部分即可开始。大多数 bootstrap less 文件至少很好，因为它们唯一的硬依赖是shared.less和mixins.less
if this still isn't working, then maybe WinLess is getting confused
如果这仍然不起作用，那么 WinLess 可能会感到困惑
回答by Adam
Overriding variables afterimporting the original bootstrap.lessworks great for me:
导入原始文件后覆盖变量bootstrap.less对我来说非常有用：
@import "less/bootstrap.less";
@body-bg: red;
@text-color: green;
@link-color: blue;
Compiling the above LESS source outputs properly customized Bootstrap CSS code.
编译上述 LESS 源输出正确定制的 Bootstrap CSS 代码。
Relevant info: http://lesscss.org/features/#variables-feature-lazy-loading
相关信息：http: //lesscss.org/features/#variables-feature-lazy-loading
回答by adamj
Another example that may help someone:
另一个可能对某人有所帮助的示例：
@import 'bootstrap/bootstrap/variables';
// Prgress bar
@progress-bar-bg: #f5f5f5;
@progress-bar-default-color: @gray-base;
@import 'bootstrap/bootstrap';
回答by Sterling Diaz
An easy way is just to override the styles in your style doc, using the same name, and marking it as !important.
一个简单的方法是覆盖样式文档中的样式，使用相同的名称，并将其标记为 !important。
