Cory O'Daniel – These are just words Software development, thoughts, and randomness

17Apr/100

Padrino, Compass, and Sass – Working happily via Ian Serlin

My cohort, Ian Serlin, discovered this. In a project we are working on we could get Compass to play well with PadrinoRb. It seems like the #sass method doesn't care about the options being passed to it, and we kept getting stack traces rendered into our CSS files. The stack trace was ruby looking for - and failing to find compass/reset.css.

This is the code that DOESN'T work (padrino 0.9.10, compass 0.8.17, sinatra 1.0).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  configure do
    register SassInitializer #The Rack Sass reloader...
 
    Compass.configuration do |config|
      config.project_path = File.dirname(__FILE__)
      config.sass_dir = "stylesheets"
      config.project_type = :stand_alone
      config.http_path = "/"
      config.css_dir = "stylesheets"
      config.images_dir = "images"
      config.output_style = :compressed
    end
  end   
  get '/stylesheets/:file.css' do
    content_type 'text/css', :charset => 'utf-8'
    # This is the doc on how to give Sass some more load paths to find the compass  files. 
    #   it doesnt work :P and for that matter, neither does:
    # sass :file, Compass.sass_engine_options
    # or the set :sass, whatever_hash_here
    sass :file, :sass => Compass.sass_engine_options
  end

Our solution was to force Sass options and Compass options to merge...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  configure do
    register SassInitializer
 
    Compass.configuration do |config|
      config.project_path = File.dirname(__FILE__)
      config.sass_dir = "stylesheets"
      config.project_type = :stand_alone
      config.http_path = "/"
      config.css_dir = "stylesheets"
      config.images_dir = "images"
      config.output_style = :compressed
    end
 
    Sass::Plugin.options.merge!(Compass.sass_engine_options)
  end
 
  get '/stylesheets/:file.css' do
    content_type 'text/css', :charset => 'utf-8'
    sass :file
  end

Yay, magic spells - it works. You can check out more ian magic spells at ianserlin.com.

Post to Twitter Post to Digg Post to Facebook Post to Reddit Post to StumbleUpon