Rails 3.1 - force SCSS variable value refresh?

Question

I've set up a set of [object].css.scss styles in my assets/stylesheets directory to correspond with the different views in my application. Every sheet includes a set of global style variable values in the first line:

@import "branding.css.scss";

And then accesses the variable values when needed ($primaryColor, $secondaryColor, etc) throughout the library.

It's beautifully dry, but unfortunately Rails doesn't refresh the object stylesheets when I make a change to the variable values in the _branding.css.scss file. I have to go and touch each file before the SCSS recompiles the object style library with the updated variable value.

This is a minor gripe but it's disruptive to the workflow, especially when I keep clearing the browser cache trying to fix it :/

Is there a better way to organize variables?

Is there any way to force the refresh?

Answer 1

I've been putting variables and mixins into an includes.css.scss file and importing them into each stylesheet that requires them. To make Rails recompile when the includes file is changed you need to use the depend_on directive in application.js. For example:

application.css:

/*
   *= depend_on includes
   *= require_self
   *= require stylesheet
*/

includes.css.scss:

$bg-color: #999;

stylesheet.css.scss:

@import "includes.css.scss";

body { background: $bg-color; }

Answer 2

This is indeed very annoying...

I don't have a complete solution, but one thing I've found is that all you need to do is touch 'application.css.scss' to get it recompile everything.

I've started using guard-compass and guard-livereload recently, but it has the same problem in 3.1. Maybe someone cleverer than me could fix it so that it touches 'application.css.scss' as well?