Ruby

How to Sinatra + Haml + Compass(SCSS) + Blueprint


Last week, I spent about half a day trying to get Sinatra working
with Compass and Blueprint. At first, it was a pain in the ass because the
documentation is pretty lame. But after some reading here and there and
trying via command line, I failed again and again.

But, don't despair, there is hope… I got it to work eventually and here is how I did it:

First of all, you have to setup your sinatra app as usual.
If you have read
Omar's post about setting up your sinatra app with test
you know what I'm talking about. Take a look at it if you haven't.

It is very easy to setup your sinatra apps, a couple of minutes and you're done.

You can also fork my ready-to-use github repo Sinatra+Haml+Compas+Blueprint
and make your changes there.

The real deal

Ok, now that we have our sinatra app, it's time to add some stuff so we are able
to use Haml and Compass.

First add these gems to you Gemfile (Compass and Haml). You will end up with something like this:
source "http://rubygems.org"

gem 'compass' 
gem 'sinatra'
gem 'haml'
gem 'cucumber'
gem 'cucumber-sinatra'
gem 'capybara'
gem 'rspec'

Now you have to add a config file for compass:

$ mkdir config
$ touch compass.rb

and add this content to it:

if defined?(Sinatra)
  # This is the configuration to use when running within sinatra
  project_path = Sinatra::Application.root
  environment = :development
else
  # this is the configuration to use when running within the compass command line tool.
  css_dir = File.join 'public', 'stylesheets'
  relative_assets = true
  environment = :production
end

# This is common configuration
sass_dir = File.join 'views', 'stylesheets'
images_dir = File.join 'public', 'images'
http_path = "/"
http_images_path = "/images"
http_stylesheets_path = "/stylesheets"

Note that I've changed the css_dir and the image dir to use "public" instead of "static"

Ok, we are half way there.

Now, let's add some more configuration for compass, but this time in your app file (myapp.rb):

require 'compass'
require 'sinatra'
require 'haml'

configure do
  set :haml, {:format => :html5, :escape_html => true}
  set :scss, {:style => :compact, :debug_info => false}
  Compass.add_project_configuration(File.join(Sinatra::Application.root, 'config', 'compass.rb'))
end

get '/stylesheets/:name.css' do
  content_type 'text/css', :charset => 'utf-8'
  scss(:"stylesheets/#{params[:name]}" ) 
end

get '/' do
  haml :index
end

With this you are telling compass to automatically convert SCSS files into CSS files.

And the final touch: let's setup blueprint for this project.

$ compass install blueprint

And that is all. I hope this is helpful for you.

Best Practices
De Código, Café y Cervezas 07 – ¿Somos profesionales?
Magento
Magento theme – Folder structure: Magento 1.9.x vs 2.x
Javascript
De Código, Café y Cervezas 05 – ReactJS + AngularJS (Parte 3)