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

Question

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

我希望我的资产在生产环境中进行预编译和指纹识别,但是在开发过程中有未压缩的资产,因此我可以更容易地调试(比如Rails资产管道).我尝试设置bootstrap-sass,但它需要Compass.但是当我得到所有的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文件的编译器可以轻松地在您的布局是不是很简单.

我想你可以试着告诉机架使用http://sass-lang.com/docs/yardoc/Sass/Plugin/Rack.html当你在开发模式下运行在你的config.ru.我从来没有试过这个,而且我曾经尝试过使用它时遇到了无线机架插件的问题.