6

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

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

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

4

1 回答 1

5

我只是在我的布局模板中为 .less 版本的引导程序或我重新编译的 .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";

所有引导 .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 插件时遇到了麻烦。

于 2012-07-21T08:11:52.800 回答