Search code examples
cssrubysinatrasasscompass-sass

Compass/Sinatra Loading Modules


I'm trying to load the CSS3 and reset modules within my SCSS files, but I'm getting an error when trying to import any Compass-specific module.

Sinatra App:

require 'rubygems'
require 'sinatra'
require 'sass'
require 'compass'

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

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

style.scss:

@import "compass/reset";
@import "compass/css3";

Error Message:

Sass::SyntaxError at /css/style.css
File to import not found or unreadable: compass/reset. Load path: /Users/work/repos/mysite

Is there a gem I can install to automatically pull these modules, or do I have to move the Compass files into my Sinatra application?


Solution

  • After a correct configuration in your compass.rb, usually is enough to add something like:

       get '/stylesheets/:name.css' do
        content_type 'text/css', :charset => 'utf-8'
        sass params[:name].to_sym, Compass.sass_engine_options
       end
    

    to your routes. Sinatra Integration, Sample project, or something you may consider useful: Better Compass integration for Sinatra (extracted from BigBand)

    In a modular Modular App I use something like:

    module Assets
      # #Sass/Compass Handler
      class Stylesheets < Sinatra::Base
        register  CompassInitializer
        get '/stylesheets/:name.css' do
          content_type 'text/css', :charset => 'utf-8'
          sass params[:name].to_sym, Compass.sass_engine_options
        end
      end
    end
    

    and I have in my lib folder a file compass_plugin.rb

    module CompassInitializer
      def self.registered(app)
    require 'sass/plugin/rack'
    Compass.configuration do |config|
      config.project_path = Padrino.root
      config.sass_dir = "app/stylesheets"
      config.project_type = :stand_alone
      config.http_path = "/"
      config.css_dir = "public/stylesheets"
      config.images_dir = "public/images"
      config.javascripts_dir = "public/javascripts"
      config.output_style = :compressed
    end
    Compass.configure_sass_plugin!
    Compass.handle_configuration_change!
    app.use Sass::Plugin::Rack
      end
    end
    

    which is shamelessly stolen from Padrino framework