twitter-bootstrap 如何使用 LESSCSS 变量自定义 Twitter Bootstrap 的 CSS？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13809895/
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
How can I customize Twitter Bootstrap's CSS using LESSCSS variables?
提问by Jeromy French
I am trying to customize Twitter Bootstrap's CSS without altering local copies of the bootstrap code.* So I have cloned the Twitter Bootstrap project into one folder and have my application code within its own folder:
我正在尝试自定义 Twitter Bootstrap 的 CSS，而不更改引导程序代码的本地副本。* 所以我将 Twitter Bootstrap 项目克隆到一个文件夹中，并将我的应用程序代码放在自己的文件夹中：
/html
/bootstrap
...etc...
/js
/less
/MyApp
...etc...
/common_files
/less
style.less
Within my "style.less" file, I define a few LESS variables, then include the bootstrap files:
在我的“style.less”文件中，我定义了一些 LESS 变量，然后包含引导文件：
/* custom settings that deviate from Bootstrap's default values */
@sansFontFamily: Trebuchet MS, Tahoma, sans-serif, Arial;
@baseFontSize: 11px;
@baseLineHeight: 18px;
/* import bootstrap components from bootstrap-dedicated folder */
@import "../../../bootstrap/less/bootstrap.less";
@import "../../../bootstrap/less/responsive.less";
Since LESSCSS variables are really constants, I'm surprised that my @sansFontFamily is not getting picked up when I compile the LESS files into CSS: lessc style.less > MyApp.css --yui-compress
由于LESSCSS 变量实际上是常量，当我将 LESS 文件编译为 CSS 时，我很惊讶我的 @sansFontFamily 没有被选中：lessc style.less > MyApp.css --yui-compress
So...what am I missing? Why are my variables being overwritten by the variables defined within Bootstrap's LESS files?
所以……我错过了什么？为什么我的变量会被 Bootstrap 的 LESS 文件中定义的变量覆盖？
*--I have checked out "Twitter Bootstrap Customization Best Practices", but think taking advantage of constants would be a better approach (if I can get it to work).
*--我已经查看了“ Twitter Bootstrap 自定义最佳实践”，但认为利用常量会是一个更好的方法（如果我可以让它工作的话）。
回答by Jeromy French
The correct approach is to import the bootstrap assets first, thendefine the custom values with LESS variables. So, given the directory structure in the question:
正确的方法是先导入引导资产，然后使用 LESS 变量定义自定义值。因此，鉴于问题中的目录结构：
If you're using Bootstrap version 2.x:
如果您使用的是 Bootstrap 2.x 版：
/* import bootstrap components from bootstrap-dedicated folder */
@import "../../../bootstrap/less/bootstrap.less";
@import "../../../bootstrap/less/responsive.less";
/* custom settings that deviate from Bootstrap's default values */
@sansFontFamily: Trebuchet MS, Tahoma, sans-serif, Arial;
@baseFontSize: 11px;
@baseLineHeight: 18px;
If you're using Bootstrap version 3.x:
如果您使用的是 Bootstrap 3.x 版：
/* import bootstrap components from bootstrap-dedicated folder */
@import "../../../bootstrap/less/bootstrap.less";
/* custom settings that deviate from Bootstrap's default values */
@font-family-sans-serif: Trebuchet MS, Tahoma, sans-serif, Arial;
@font-size-base: 11px;
@line-height-base: 18px;
Complete list of variables can be found in variables.lessfile.
完整的变量列表可以在 variables.less文件中找到。
回答by mr.perplexed
PeterVR's advice to move the custom variable declarations below the bootstrap @import statements is correct according to the docs here http://lesscss.org/#-variables. This states:
根据http://lesscss.org/#-variables 中的文档，PeterVR 建议将自定义变量声明移动到引导程序 @import 语句下方是正确的。这说明：
When defining a variable twice, the last definition of the variable is used, searching from the current scope upwards. For instance:
两次定义变量时，使用变量的最后一个定义，从当前作用域向上搜索。例如：
@var: 0;
.class1 {
@var: 1;
.class {
@var: 2;
three: @var;
@var: 3;
}
one: @var;
}
Compiles to:
编译为：
.class1 .class {
three: 3;
}
.class1 {
one: 1;
}
(sample code edited - there's a couple of typos in their version!)
（已编辑示例代码 - 他们的版本中有几个错别字！）
So I would guess the compilation sequence is something like:
所以我猜编译顺序是这样的：
- Process all @imports to build a single chunk of LESS code
- Walk through the LESS code and gather up all the variable declarations (per scope block)
- Any variable declaration value replaces any previous instance of the same name (per scope block)
- Replace variable placeholders with variable values
- 处理所有@imports 以构建单个 LESS 代码块
- 遍历 LESS 代码并收集所有变量声明（每个作用域块）
- 任何变量声明值替换任何以前的同名实例（每个作用域块）
- 用变量值替换变量占位符
This would explain why the value of .class1 .class { three:is 3 even though it's declared before the @var: 3;declaration.
这将解释为什么.class1 .class { three:即使在声明之前@var: 3;声明了 的值为3 。
回答by ShibinRagh
Hello I got a better way from random internet search
你好，我从随机互联网搜索中得到了更好的方法
http://ollomedia.com/using-twitter-bootstrap-the-right-way/
http://ollomedia.com/using-twitter-bootstrap-the-right-way/
Example source code , Please download and checkout
示例源代码，请下载并签出
http://ollomedia.com/wp-content/uploads/sample.zip
回答by tocallaghan
I did something similar recently and the best approach I found was to create my own "variables_override.less" and import this afterimporting the standard variables.less in bootstrap.less and responsive.less. Then compile both files as normal and your variables will override the bootstrap defaults
我最近做了类似的事情，我发现最好的方法是创建我自己的“variables_override.less”，并在导入 bootstrap.less 和responsive.less 中的标准 variables.less后导入它。然后正常编译这两个文件，您的变量将覆盖引导程序默认值
This approach does involve modifing bootsrap.less and responsive.less but in a very minimal way
这种方法确实涉及以非常小的方式修改 bootsrap.less 和 Responding.less
