How to start using Twitter Bootstrap and Sass in a Sinatra project?

Question

I know Twitter Bootstrap is written in Less, but there are tons of versions of Sass. I find it difficult to determine the best use case and how to set up the Sinatra project.

I want my assets to be precompiled and fingerprinted in the production environment, but uncompressed resources were created in the development so that I can debug more easily (for example, the Rails pipeline). I tried setting up bootstrap-sass , but that requires a Compass. But I don’t need a compass when I have all the blit tracks. I also had a setup problem.

In any case, the final answer to what I have to do will be helpful.

Answer 1

I just use the env-dependent tags in my layout template for the free version of bootstrap or my recompiled version of .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 %> 

Thus, it just shows me the on-the-fly version in development and the .css file in production mode. When I deploy, I just compile the stylesheets on the command line.

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

(In this example, I also use https://github.com/wbzyl/sinatra-static-assets/ to timestamp the css file for production.)

public / less / style.less only runs something like:

  @import "bootstrap/bootstrap.less"; @import "bootstrap/responsive.less"; 

And all bootstrap files without. live in public / less / bootstrap /

Basically, just drop everything https://github.com/twitter/bootstrap/tree/master/less there.

And then you can start rewinding things yourself in one file, import other files that you created, or edit the actual boot files (: |)

If you really need to use sass (I don’t understand why this should be so, see the comment), this is not so simple, since the standard .js compiler is not included in your layout.

I think you could try saying rack to use http://sass-lang.com/docs/yardoc/Sass/Plugin/Rack.html in your config.ru when you are working in development mode. I have never tried this, though, and I had problems with the plugin without a board. Once I tried to use it.