SASS Global Variables + Rails 3.1 - ruby-on-rails

Question

I am using Rails 3.1RC4 with default SASS setup. I have the following files
application.css.scss
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require_tree .
*/
_variables.css.scss
$var1 : somevalue;
...
site_layout.css.scss
#import "variables";
... Some Sass Code
But I can't access the variables defined in _variables.css.scss in site_layout. What am I doing wrong? Rails is apparently finding the variables file since it doesn't throw a "file not found" error, which it does if I change the import filename. Still the vars are not carried over.
Any ideas?
Thanks!

Answer 1

The issue seems to be fixed with the latest release of rails & sprockets. In your gemfile:
gem 'rails', :git => "git://github.com/rails/rails.git", :branch => "3-1-stable"

Answer 2

The first part of your question (the application.css.scss code snippet) doesn't seem to have any relevance here, since it's just commented-out code, so I'll skip that part.
For the second code snippet, I don't believe SASS is set up to import a "partial" quite like you're doing here. You'd be better off doing something like this:
_variables.scss (Renamed from _variables.css.scss):
$var1: somevalue;
Note that the underscore in your filename is not required like it would be for a Ruby partial. You can just as easily name it variables.scss as long as you change the import statement to #import "variables";
site_layout.scss (Renamed from site_layout.css.scss)
#import "_variables";
.test_thingy {
color: $var1;
}
This will generate a site_layout.css file that contains the following code replacement:
.test_thingy {
color: somevalue; }
Note that there's no need to have files named like filename.css.scss like you would with HAML/ERB files. Simply name the file what you want it to be. For example, filename.scss will cause SASS to generate a CSS file called filename.css automatically.