CODEWITHSUNDEEP
rubysinatrasass
ab217
ab217

Reputation: 17160

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!

Upvotes: 14

Views: 12826

Answers (4)

Agush
Agush

Reputation: 5116

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

Upvotes: 51

Leonardo Barbosa
Leonardo Barbosa

Reputation: 1396

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

Upvotes: 14

Paul Hoffer
Paul Hoffer

Reputation: 12906

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

Upvotes: 16

Fernando Diaz Garrido
Fernando Diaz Garrido

Reputation: 3995

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

Upvotes: 6

Related Questions