Question

对于我正在研究的项目，我想使用自定义版本的Bootstrap。玩完之后我觉得Bootstrap是如何工作的。有一个中心的.less文件，bootstrap.less，它捆绑在所有其他.less文件中，完成某些任务。我的计划是适应bootstrap.less和variables.less，这对我的目的来说已经足够了。

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

我为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.css中相同的15行从未更改的bootstrap.less编译，如下所示：

/*! 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";

并且存在更多差异，完全不同的行为，并且不知道为什么会发生这种情况。继承了我的问题：

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

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

Answer 1

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

<强>更新

他们提供css缩小，即时编译，向后@import解析，显示语法错误，跨浏览器css前缀，自动更少更新程序，开箱即用通知，以及它与Twitter Bootstrap一起使用

从bootstrap.less编译bootstrap.css需要哪些资源？

1 个答案: