2

对于我正在处理的项目，我想使用自定义版本的 Bootstrap。在玩过它之后，我似乎很清楚 Bootstrap 是如何工作的。有一个中央 .less 文件 bootstrap.less，它捆绑在所有其他 .less 文件中以完成某些任务。我的计划是调整 bootstrap.less 和 variables.less，这对我的目的来说已经足够了。

所以我确实在https://github.com/twbs/bootstrap/tree/master/less下载了 twitter bootstrap git 存储库的完整 less 文件夹

并且我为 Mac OS X 安装了 less.app，将所有 Bootstrap 文件设置为被监视，并且每次我更改任何 .less 文件时只重新编译 bootstrap.css。到目前为止，我没有更改任何文件，但确实重新编译了 bootstrap.less，这给了我一个新的 bootstrap.css

现在我的问题是，新编译的 bootstrap.css（从从 bootstrap git 存储库下载的未更改文件编译）看起来与 bootstrap 下载附带的 bootstrap.css 完全不同，而且它的行为也不同。

直接下载的 bootstrap.css 开始是这样的：

/*!
 * Bootstrap v2.3.1
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */

.clearfix {
  *zoom: 1;
}

.clearfix:before,

从未更改的 bootstrap.less 编译而来的 bootstrap.css 中相同的 15 行如下所示：

/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

bootstrap.less 看起来像这样（仅前 15 行）：

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

// Reset
@import "normalize.less";
@import "print.less";

// Core CSS
@import "scaffolding.less";

@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";

还有更多的差异，完全不同的行为，不知道为什么会这样。所以这是我的问题：

  • 应该像我描述的那样编译工作吗？
  • 我错过了一些重要的资源吗？

我很高兴每一个小提示都有助于找到解决方案......

4

1 回答 1

-2

您只需要一个编译器来读取您拥有的 .less 代码并将其转换为 .css。我个人会推荐SimpleLESS。他们提供的编译器可以完全满足您的需求，包括拖放项目文件夹选项。

更新：

它们提供 css-minification、即时编译、向后 @import 解析、语法错误显示、跨浏览器 css-prefix、自动 less-updater、开箱即用通知，并且可以与 Twitter Bootstrap 一起使用。

于 2013-10-27T22:12:13.563 回答