如何使用 LESSCSS 变量自定义 Twitter Bootstrap 的 CSS？

Question

我正在尝试在不更改引导代码的本地副本的情况下自定义 Twitter Bootstrap 的 CSS。* 因此，我将 Twitter Bootstrap 项目克隆到一个文件夹中，并将我的应用程序代码放在它自己的文件夹中：

/html
    /bootstrap
       ...etc...
       /js
       /less
    /MyApp
       ...etc...
       /common_files
          /less
             style.less

在我的“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";

由于LESSCSS variables are really constants，我很惊讶我的@sansFontFamily 在我将LESS 文件编译成CSS 时没有被选中：lessc style.less > MyApp.css --yui-compress

那么……我错过了什么？为什么我的变量会被 Bootstrap 的 LESS 文件中定义的变量覆盖？

*--我已经检查了“Twitter Bootstrap Customization Best Practices”，但认为利用常量会是更好的方法（如果我可以让它工作的话）。

Answer 1

正确的做法是先导入引导资产，然后用 LESS 变量定义自定义值。因此，鉴于问题中的目录结构：

如果您使用的是 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;

如果您使用的是 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;

---

变量can be found in variables.less文件的完整列表。

Answer 2

根据http://lesscss.org/#-variables 此处的文档，PeterVR 将自定义变量声明移动到引导程序 @import 语句下方的建议是正确的。这表明：

当定义一个变量两次时，使用变量的最后一个定义，从当前作用域向上搜索。例如：

@var: 0;
.class1 {
    @var: 1;
    .class {
        @var: 2;
        three: @var;
        @var: 3;
    }
    one: @var;
}

编译为：

.class1 .class {
    three: 3;
}
.class1 {
    one: 1;
}

（示例代码已编辑 - 他们的版本中有几个拼写错误！）

所以我猜编译顺序是这样的：

1. 处理所有 @import 以构建一个 LESS 代码块
2. 浏览 LESS 代码并收集所有变量声明（每个范围块）
3. 任何变量声明值都会替换任何以前的同名实例（每个范围块）
4. 用变量值替换变量占位符

这可以解释为什么 .class1 .class { three: 的值是 3，即使它是在 @var: 3; 声明之前声明的。

Answer 3

你好，我从随机互联网搜索中找到了一个更好的方法

http://ollomedia.com/using-twitter-bootstrap-the-right-way/

示例源码，请下载查看

http://ollomedia.com/wp-content/uploads/sample.zip

Answer 4

我最近做了类似的事情，我发现最好的方法是创建自己的“variables_override.less”并在 在 bootstrap.less 和 responsive.less 中导入标准 variables.less 之后导入这个。然后正常编译这两个文件，你的变量将覆盖引导默认值

这种方法确实涉及修改 bootsrap.less 和 responsive.less，但方式非常简单