0

I'm looking at the Compass-Sinatra starter file on GitHub. Is there a way to set the output_style for an scss file in Sinatra? Ideally I would like to set the style to :expanded when in development.

I think I'm having trouble understanding how sass(:"stylesheets/#{params[:name]}", Compass.sass_engine_options ) works and where I can set those options.

1
  • I have a feeling I'm not realizing I still need to watch or compile.
    – kaplan
    Sep 20, 2013 at 20:16

1 Answer 1

0

I found that adding the output_style setting to the compass.config file works for changing the output_style. It can either go in the if defined?(Sinatra) block or in the configuration block at the bottom of the compass.config file.

# compass-sinatra-starter/config/compass.config

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

# Or if you wanted to have the output_style set for all environments(?) 

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

Note: stop/start the server if you change the settings if you don't see the change.

For example, I have a styles.scss file in views/stylesheets/styles.scss then if I go to http://localhost:4567/stylesheets/styles.css I'll get the .scss file compiled in the browser to .css. Changing the output_style, start/stop the server the .css output_style changes. I don't know if using reloader would work, but it might avoid the stop/start?

I found a couple of other good resources. Andrew Stewart has a blog post and a GitHub template

Originally I was trying to learn about media queries in Sass(scss) with Sinatra and found a great video Ben Schwarz posted, but it doesn't go into the nitty gritty of setting up. It's more about the media query. Ben also has the source on GitHub.

But it seems like AssetPack is the best way to go for serving assets.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.