Compass and SASS (not SCSS) in the Rails 3.1 asset pipeline
Posted in Inside TFG
Update: see my updated post with details of a newer, better solution.
If you’re like me, you’re probably already playing around with the Rails 3.1 release candidate. If not, go take a peek at why you should be excited. (Thanks Ryan Bates!) If so, like me, you’re probably also wanting to play with all your old friends, like Compass.
Compass, by default, manages SASS for you. It gives you a place to put it, app/stylesheets, and takes care of bundling everything together. The new Rails 3.1 asset pipeline does this all for you using Sprockets instead, and does it nice and cleanly in a consistent manner with CoffeeScript and whatever else you might eventually integrate.
The problem is, I don’t want Compass managing my SASS. I like love the asset pipeline. But by default, from the asset pipeline I can’t use Compass. It doesn’t know what or where it is. So, I’ve added this to my new rails 3.1 projects:
Can’t see this Gist? View it on Github!
I’m also a heathen and like SASS, not SCSS, and it took me a minute to realise that it’s just as easy to use. Instead of mystyle.css.scss, name your stylesheet mystyle.css.sass. To make rails do this by default when you’re generating controllers et al, add this into your config/application.rb‘s config section:
Can’t see this Gist? View it on Github!
You can even rename the default application.css to application.css.sass and all the sprockets require_* machinery still works. Make sure you change the /* ... */ comments to // comments.
Beauty!
Moo
Jun 7, 2011
See issue #337 on Compass: https://github.com/chriseppstein/compass/issues/337
Darren
Jun 8, 2011
I’ve got issues getting gradients to work, ‘compass/css3′ imported, border-radius is working, background-image linear-gradient isn’t. It was working on Rails 3.0.x but with 3.1 and this initializer – no luck.
It’s throwing
Sass::SyntaxError (Undefined operation: “-compass-list-size(compact(linear-gradient(…………..
Anyone with any insights?
sj26
Jun 8, 2011
I encountered this myself. It’s because the compass includes a set of Ruby libraries that the initializer doesn’t set up. I’ll be posting an update soon.
sj26
Jun 8, 2011
Thanks Moo! I’ll keep and eye on the issue.
Stefan
Jun 15, 2011
Yeah, I used this hack too, but it is no longer needed, as compass now has a branch that integrates with 3.1 that uses a railtie to setup these path. Drop
gem “compass”, :git => ‘git://github.com/chriseppstein/compass.git’, :branch => ‘rails31′
into your gemfile and now sass&compass will just work from assets/stylesheets and the issues with some of the partials(like gradient) are also gone. Just remember to rename your stylesheets (mystyles.css.sass instead of just mystyle.sass) and you’re good to go.
Samuel Cochran
Jun 16, 2011
Hey Stefan,
That’s exactly what I’ve suggested in the update to this article:
http://blog.thefrontiergroup.com.au/2011/06/update-compass-and-sass-not-scss-in-the-rails-3-1-asset-pipeline/
:-)
Ken Collins
Jul 30, 2011
I post and updated article on how I got this (with .scss files) working in 3.1.0.rc5.
http://metaskills.net/2011/07/29/use-compass-sass-framework-files-with-the-rails-3.1.0.rc5-asset-pipeline/