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

Question

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

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

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

Answer 1

我只是在我的布局模板中为 .less 版本的引导程序或我重新编译的 .css 版本使用依赖于 env 的标签：

<% 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";

所有的引导 .less 文件都位于 public/less/bootstrap/

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

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

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

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