6

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?

complex
  • 61
  • 3

4 Answers4

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', '...');
mu is too short
  • 426,620
  • 70
  • 833
  • 800
0

Well, if you mean a dynamic object like a model loaded via a controller, you can't really, at least not very easily. This is because unlike HTML ERB templates, the SASS ones are generally rendered once and served statically unless something changes in the code or they are re-precompiled via rake (depending on your environment configs). But you can access some helper methods, global objects, and use some ruby in there by renaming the file with an "erb" extension e.g. application.css.scss.erb. See

If you need styles based on dynamically loaded objects, like models, you can...

  1. Write CSS styles literally in the template
  2. Compile the stylesheets dynamically. See the top-rated answer here: How do I create dynamic CSS in Rails?
  3. For some use cases you might accomplish the same thing by leveraging Rails/SASS's import path hierarchy (i.e. SASS @import 'partial_name_with_no_path' will search the importing SASS files folder first and then fall back to the top level - You can configure this as well).
Hari Honor
  • 8,677
  • 8
  • 51
  • 54
0

I think you might be able to do something just like what you have there, but you need to change the extensions of the files to '.css.scss.erb'

Matthew
  • 12,892
  • 6
  • 42
  • 45
  • Ah, I should have mentioned I tried that. It's in application.css.sass.erb but no dice. – complex Sep 16 '11 at 05:59
  • then i guess you would have to run the request through a controller, so create link tags that route to controllers that respond to css requests or something – Matthew Sep 16 '11 at 06:05
0

To follow up on this, I did create a stylesheet controller but it was rather contrived to get Sass parsing and asset pipeline load paths all working correctly. I ended up dumping that and reorganizing the styles so I could generate a static stylesheet for each company which gets regenerated and uploaded to S3 on company update.

complex
  • 61
  • 3