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

Question

I know Twitter Bootstrap is written in Less, but there are a bunch of Sass versions as well. I am having a hard time figuring out the best one to use and how to set up my Sinatra project.

I want my assets to be pre-compiled and fingerprinted in a production environment but have the uncompressed assets in development so I can debug easier (like the Rails asset pipeline). I tried setting up bootstrap-sass, but it requires Compass. But I don't really need compass when I've got all the twitter bootstrap mixins. I also had trouble configuring it.

Anyway, a definitive answer on what I should do would be helpful.

Answer 1

I just use env-dependent tags in my layout template for the .less version of bootstrap, or my recompiled .css version:

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

This way 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 that example I'm also using https://github.com/wbzyl/sinatra-static-assets/ to timestamp the css file for production.)

public/less/style.less starts off just something like:

 @import "bootstrap/bootstrap.less";

 @import "bootstrap/responsive.less";

And all the bootstrap .less files live at public/less/bootstrap/

Basically just drop all of https://github.com/twitter/bootstrap/tree/master/less in there.

And you can then start over-riding things yourself in the same file, importing other files you've made, or editing the actual core bootstrap files (:|)

If you really have to use sass (I don't see why this should be the case, see comment) it isn't quite as simple as there isn't a standard .js compiler to easily include in your layout.

I guess you could try telling rack to use http://sass-lang.com/docs/yardoc/Sass/Plugin/Rack.html in your config.ru when you're running in development mode. I've never tried that though, and I had trouble with the .less rack plugin the one time I tried to use it.