Autonomous Machine

Hosting SASS (or any dynamically generated asset) on Heroku can be a challenge, as most of the libraries that generate browser-ready versions of these assets expect to have write access to the filesystem.

There are a variety of libraries that provide asset compiling and caching, and some of these offer ways to do this in a Heroku-friendly way (usually by leveraging Varnish. But sometimes you don't want to install and learn how to use a new asset packaging library just to get a 100 line Sinatra app up and running IN THE CLOUD.

Heroku provides official instructions for using SASS on their platform, but like a lot of their documentation, it is Rails-specific. So here are the official instructions, converted for use with Sinatra (or I imagine, most Rack apps):

require 'sinatra'
require 'sass/plugin/rack'

use Sass::Plugin::Rack

configure :production do
  use Rack::Static,
      urls: ['/stylesheets'],
      root: File.expand_path('../tmp', __FILE__)

  Sass::Plugin.options.merge!(template_location: 'public/stylesheets/sass',
                              css_location: 'tmp/stylesheets')
end

get '/' do
  # your app here
end

• This assumes that the Sinatra app is in the root directory of the project, and that all SASS files live at public/stylesheets/sass.
• Don't forget to add public/stylesheets/*.css to .gitignore to help prevent checking generated CSS files into git during development.
• No files will be served from public/stylesheets in production, so make sure all stylesheets are in the sass directory. For CSS resets and the like, change their extensions to scss and drop them into the sass directory.