How can I access Rails objects in Sass?

Question

In a Rails 3.1.0 project, I have Companies with a few customizable attributes like background_color and link_color. I want to be able to set some Sass variables like so:

$background_color: <%= @company.background_color %>
$link_color: <%= @company.link_color

...

This doesn't work because @company is nil when Sass does its thing. I'm not sure how to go about solving this in a way that's dynamic (companies can be created and colors can be changed and the views update immediately). Any suggestions?

Answer 1

I can think of a couple approaches off the top of my head:

1. Serve your stylesheet through a controller.
2. Use CSS classes to configure the colors and serve just that CSS through a controller, inlined partial, or a CSS @import.

Serving your stylesheet through a controller is pretty straightforward so there's not much to say. This might be a bit ugly and cumbersome.

For the second one, you'd add a couple extra CSS classes:

.custom-bg {
    background-color: some-default-bg;
}
.link-fg {
    color: some-default-fg;
}
/*...*/

Then any element that need to use the custom background color would need their usual CSS classes and custom-bg; similar shenanigans would be needed for the other configurable values. To supply the customized CSS, you could inline a <style> element into your HTML using a standard ERB partial or you could serve the CSS through a controller (either through <style src="..."> or @import). So you'd fake the SASSy goodness with old school multiple CSS classes in your HTML.

There's also JavaScript. You'd need some way to identify the elements that need their colors adjusted and then adjust them directly with things like this:

$('.need-custom-background').css('background-color', '...');