7

我正在尝试在不更改引导代码的本地副本的情况下自定义 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 变量确实是常量，我很惊讶当我将 LESS 文件编译成 CSS 时，我的 @sansFontFamily 没有被选中：lessc style.less > MyApp.css --yui-compress

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

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

4

4 回答 4

9

正确的方法是首先导入引导资产，然后使用 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;

变量的完整列表可以在 variables.less文件中找到。

于 2012-12-11T21:13:54.030 回答
4

根据此处的文档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. 用变量值替换变量占位符

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

于 2013-02-02T14:30:46.050 回答
1

您好，我从随机互联网搜索中获得了更好的方法

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

示例源代码，请下载并签出

http://ollomedia.com/wp-content/uploads/sample.zip
于 2013-05-17T16:13:12.760 回答
0

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

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

于 2012-12-11T02:09:18.167 回答