Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 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!

like image 744
Denny Avatar asked Jun 18 '11 00:06

Denny


People also ask

Can I use Sass in Rails 3?

Rails 3.1+ provides support for Sass by default, which has become popular among the Rails community. Until Rails 3.0, the asset pipeline was available only via third-party libraries such as Sprockets. The assets (images, JavaScript and stylesheet files) were placed under the public directory.

Are variables global or local in Sass?

Variables declared at the top level of a stylesheet are global. This means that they can be accessed anywhere in their module after they’ve been declared. But that’s not true for all variables. Those declared in blocks (curly braces in SCSS or indented code in Sass) are usually local, and can only be accessed within the block they were declared.

What happens when a Sass file is transpiled?

So, when the Sass file is transpiled, it takes the variables (myFont, myColor, etc.) and outputs normal CSS with the variable values placed in the CSS, like this:

How to use global variables in CSS?

!global indicates that a variable is global, which means that it is accessible on all levels. Now the color of the text inside a <p> tag will be green! Tip: Global variables should be defined outside any rules. It could be wise to define all global variables in its own file, named "_globals.scss", and include the file with the @include keyword.


1 Answers

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"
like image 85
Denny Avatar answered Sep 24 '22 15:09

Denny