sinatra with bourbon

posted by alexis reigel on march 24, 2012

If you search the web for “bourbon sinatra” you get a whole lot about Frank Sinatra and his drinking habits. But that’s not what this post is about.

How to use bourbon scss mixins with sinatra is not documented on their project page. So here’s my short setup.

The following is standard, from their documentation.

$ gem install bourbon # or better, add to use Gemfile and use bundler
$ cd views/scss
$ bourbon install

Next, import bourbon in your main scss file (as first statement).

@import 'bourbon/bourbon';

The following is the important and the undocumented part, specifically for sinatra. You need to require the ruby libraries in your scss route.

get '/assets/css/:name.scss' do |name|
  require './views/scss/bourbon/lib/bourbon.rb'
  content_type :css 
  scss name.to_sym, :layout => false
end

commented by Ian on may 01, 2012

I needed to change line 4 to
scss “scss/#{name}”.to_sym, :layout => false

and place my sass files in views/scss

commented by Craig Ulliott on july 01, 2012

I needed to add a semicolon to the import statement in sinatra

@import ‘bourbon/bourbon’;

commented by alexis on july 02, 2012

@Craig: Yes you’re right, In scss the semicolon is required. Thanks, corrected it.