How to link a Sass file in a Sinatra app?

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!

---

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

---

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

---

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

---

You dont link the scss, a scss like a sass is not a file that is supposed to be interpreted by the browser, you need a compiler that process this file and convert it to css.

You need the compass gem to automatically generate the css from your scss and then you link the css as you were referring before

Here you have an example of compass configuration for sinatra:

https://github.com/chriseppstein/compass/wiki/Sinatra-Integration