SASS Global Variables + Rails 3.1

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 t开发者_运维知识库o 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!

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"

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.