Question

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

我希望我的资产在生产环境中进行预编译和指纹识别，但是在开发过程中有未压缩的资产，因此我可以更容易地调试（比如Rails资产管道）。我尝试设置bootstrap-sass，但它需要指南针。但是当我得到所有的twitter bootstrap mixins时，我真的不需要罗盘。我也无法配置它。

无论如何，对我应该做的事情的确切答案会有所帮助。

Answer 1

我只是在我的布局模板中使用env依赖标签，用于.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中的所有内容。

然后，您可以在同一个文件中开始自行覆盖事物，导入您制作的其他文件，或者编辑实际的核心引导程序文件（：|）

如果你真的必须使用sass（我不明白为什么会出现这种情况，请参阅注释）它不是那么简单，因为没有标准的.js编译器可以轻松地包含在你的布局中。

我猜你在开发模式下运行时可以尝试告诉机架在你的config.ru中使用http://sass-lang.com/docs/yardoc/Sass/Plugin/Rack.html。我从来没有尝试过这个，而且我曾经尝试过使用.less机架插件时遇到了麻烦。

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

1 个答案: