twitter-bootstrap - 如何在 Sinatra 项目中开始使用 Twitter Bootstrap 和 Sass？

Question

我知道 Twitter Bootstrap 是用 Less 编写的，但也有很多 Sass 版本。我很难找出最好的使用方法以及如何设置我的 Sinatra 项目。

我希望我的 Assets 在生产环境中进行预编译和指纹识别，但在开发中拥有未压缩的 Assets ，以便我可以更轻松地调试(如 Rails Assets 管道)。我尝试设置 bootstrap-sass ，但它需要指南针。但是当我拥有所有 twitter bootstrap mixin 时，我真的不需要指南针。我也很难配置它。

无论如何，关于我应该做什么的明确答案会有所帮助。

Answer 1

我只是在我的布局模板中为 .less 版本的 Bootstrap 或我重新编译的 .css 版本使用依赖于环境的标签:

<% if settings.development? %>
    <link rel="stylesheet/less" href="/less/style.less">
    <%= javascript_tag "/js/libs/less-1.2.1.min.js" %>
<% end %>

<% if settings.production? %>
    <%= stylesheet_tag "/css/mycss.css" %>
<% end %>

这样，它只会向我显示开发中的即时版本，以及生产模式下的 .css 文件。当我部署时，我只是在命令行上编译样式表。

$ lessc public/less/style.less > public/css/mycss.css

(在该示例中，我还使用 https://github.com/wbzyl/sinatra-static-assets/ 为生产的 css 文件添加时间戳。)

public/less/style.less 的开头是这样的:

 @import "bootstrap/bootstrap.less";

 @import "bootstrap/responsive.less";

所有 Bootstrap .less 文件都位于 public/less/bootstrap/

基本上只需删除所有 https://github.com/twitter/bootstrap/tree/master/less在那里。

然后，您可以开始自己在同一个文件中覆盖内容，导入您制作的其他文件，或编辑实际的核心 Bootstrap 文件 (:|)

如果您真的必须使用 sass(我不明白为什么会这样，请参阅评论)，它并不像没有标准 .js 编译器可以轻松包含在您的布局中那样简单。

我想你可以试着告诉 rack 使用 http://sass-lang.com/docs/yardoc/Sass/Plugin/Rack.html当您在开发模式下运行时，在您的 config.ru 中。不过我从来没有尝试过，而且有一次我尝试使用 .less rack 插件时遇到了麻烦。