Bootstrap变量覆盖LESS

Question

我一直在调查,因为我认为花一些时间来学习定制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文件以获取带有重写变量导入调用的新bootstrap.css,并将css与html文件链接,但网格不会更改为16列.

任何人都可以指出我做错了什么？

Answer 1

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

我在一个类似的项目上工作,我们在"第三方"位置进行引导,然后仅覆盖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(而不是所有的bootstrap).这是故意的,因为在大多数情况下你不需要所有的bootstrap,只需要它的一部分就可以了.大多数bootstrap较少的文件至少是好的,因为他们唯一的硬依赖是shared.less和mixins.less

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