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以来，当我将LESS文件编译成CSS时，我很惊讶我的@sansFontFamily没有被选中：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建议将自定义变量声明移到bootstrap @import语句下面是正确的。这表明：

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

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

编译为：

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

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

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

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

这可以解释为什么.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中。然后正常编译这两个文件，你的变量将覆盖bootstrap默认值

这种方法确实涉及修改bootsrap.less和responsive.less但是以非常小的方式

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

4 个答案:

如果您使用的是Bootstrap 2.x版：

如果您使用的是Bootstrap 3.x版：