What is the value of Compass for Rails 3.1?

Question

I'm trying to decide if I should include Compass when starting a new Rails 3.1 project. I haven't used Compass before.

Rails 3.1 now supports SCSS directly. The Rails 3.1 asset pipeline (via sprockets) now compiles stylesheets automatically. And I can use a SCSS version of a CSS framework such as Blueprint directly.

What benefits will I get from using Compass with Rails 3.1?

Cardsharp

On the Compass mailing list, Wynn Netherland answered the question: "Compass is to Rails what Sass is to Ruby. Compass packages patterns and best practices for Sass for things like CSS3, asset url helpers, and more, not just grid frameworks." – Cardsharp

I think he meant Compass is to Sass what Rails is to Ruby (at least if my memory of the SAT is correct) – Irritative

Answer 1

Bourbon (by Thoughtbot) is a light alternative to compass that integrates well with rails 3.1.

It has the main css3 mixins you get with compass (background-images, box shadow, border radius, gradients...). It also has helpers to style buttons, "gridify" your layout and a few more goodies.

You might miss some of the power features compass has, but that can be easily overcome with the power of sass : just copy/create you're own mixin!

Compass often gave me headaches when upgrading my rails app. I appreciate the simplicty of Bourbon (although it might give you headaches as well... in the morning :-) )

Braunite

Bourbon and Rails 3.1 feels right to me. Better separation of concerns than trying to do everything with Compass. – Cardsharp

Answer 2

Compass provides a lot of good mixins, a pretty powerful sprite-generator, and a tight integration with Blueprint in a way that means you don't have to use non-semantic col classes all over your HTML.

There's not really much benefit to using Compass if you're not using the mixins, but then again there isn't much benefit to using SCSS if you're not using them (nesting and variables are nice, but mixins help keep browser-specific implementation of properties in a single location).

However, I found Blueprint to be more of a hassle than it is worth. I would still use Compass for the mixins, but right now compatibility between Rails 3.1 and Compass is terrible (you have to jump through some hoops and you still sacrifice some functionality).

In a somewhat related note, the way Rails 3.1 compiles assets is rather "broken". It doesn't consider how the community has been using Sass for the last year or two — keeping variables, mixins, and page partials all separate to be included by a master file in order. The "automatic" way Sprockets loads and compiles Sass disassociates files from each other, so even if you define the load order manually in your application.css, variables you set in a file are not available to subsequently loaded files.

Barter

Thanks for the cautionary note on current Rails 3.1 issues. It seems the Compass sprite generator and the mixins have continuing value. Are there alternatives to Blueprint that provide a CSS reset and semantically named classes? – Cardsharp

Re: Semantic CSS Frameworks, I don't think so. The difference is in applying styles to classes named "span-3 prepend-2" you wrap your menu in a <nav> tag and apply the styles to that, directly. When you need an ID or class, you name it suitably, like ".user" or "#showreel". Compass let's you do this with Blueprint through Mixins (body > div { @include container; } nav { @include col(3); @include prepend(2); }. Personally I don't like it, but it's much better than littering your HTML with layout classes. #i_am_a_snob – Barter

I tend to use a version of Eric Myers' (sp?) CSS reset, and then build on top of that. Up until recently I've used all my own mixins, but I've started using the Compass mixins. I still do all my layout-related CSS myself. It's too quick and easy to do without a css grid framework as is, unless you're doing a very grid-based design (or something that has to be super flexible, like a Wordpress theme [shudders]). – Barter

Readers should note that this answer relates to a pre-release version of Rails 3.1 The latest release candidate of Rails 3.1 has fixed the Sprockets issues with including partials. I think it safe to assume that it will be working nicely once 3.1 actually ships. – Backcourt

Answer 3

Compass is a design-agnostic framework - e.g. you don't have to worry about which browsers the users have.

e.g. Compass has add-ons, like for example the CSS3 cross-browser features: http://compass-style.org/reference/compass/css3/ this way you can specify things in your .scss files browser-independent

Side-Note:

The way Rails 3.1 processes .scss files, is one at a time -- e.g. if you define variables in one file, they don't get carried over to the other .scss files. IMHO not really optimal solution.

Flodden

Blueprint is a design-agnostic CSS framework and I don't need Compass to install it directly as SCSS files with Rails 3.1. – Cardsharp

Answer 4

The html5boilerplate compass plugin is a great time-saver too, so for these reasons I would use compass

Dric