How to link a Sass file in a Sinatra app?

Question

I am trying to link a Sass file to a Sinatra app. I have a public/sass/styles.scss file and I am trying to link it in my views/layout.haml file. I am able to link a regular css file using the following link in my layout.haml: %link(rel="stylesheet" href="styles.css"). However, when I try and link to my sass/styles.scss, it does not work. Can someone please tell me how to link a Sass css file in a Sinatra app? Thanks!

Answer 1

You can use Sass::Plugin::Rack

First install the Sass gem.

Add it in your Gemfile, if you are using Bundler: gem 'sass'.

In your config.ru add:

require 'sass/plugin/rack'

Sass::Plugin.options[:style] = :compressed
use Sass::Plugin::Rack

Then create a folder in public/stylesheets/sass/, and drop all your .scss and .sass files there.

This will create the corresponding .css in public/stylesheets/

For example: public/stylesheets/sass/style.scss will generate public/stylesheets/style.css

And that's it, you can change the paths from the default ones and change other options mentioned in the reference docs

Answer 2

You don't need to use a separate gem to compile your .scss files, Sass has that built-in.

sass --watch style.scss:style.css will set Sass to automatically compile style.scss into style.css whenever it gets changed. From the Sass website,

Now whenever you change style.scss, Sass will automatically update style.css with the changes. Later on when you have several Sass files, you can also watch an entire directory

Answer 3

You could do:

get '/stylesheets/*.css' do
  content_type 'text/css', :charset => 'utf-8'
  filename = params[:splat].first
  sass filename.to_sym, :views => "#{settings.root}/assets/stylesheets"
end