Sass variable undefined at precompilation

Question

I upgrade my Rails application (3.2.17) to sass, and I run undefined variable errors during resource precompilation. I use @import to include my fragments in the master.scss file. This setting works fine locally, but the errors in precompilation: The only way to get around errors is to use @import fragments in fragments that reference mixins and variables defined in the first fragment.

For example: I have @import 'fonts' and 'buttons' in master.scss, and then I have to @import 'fonts' a second time in 'buttons' because it uses the variable defined in 'fonts'. This results in a precompilation error, but it is not ideal, because instead of one instance of the “fonts” loaded into the application, there are now two.

@importing all fragments only once in master.scss works locally when I don't precompile. There must be a solution to this. Any thoughts?

Answer 1

You see this error because you are using application.css with the require directive.

From the SAL reils documentation.

Sprockets provides some directives that fit inside comments called require, require_tree and require_self. DO NOT USE THEM IN YOUR SASS / SCSS FILES. They are very primitive and do not work with Sass files. Instead, use the Sass native @import directive that sass-rails has configured to integrate with the conventions of your Rails projects.

Just rename application.css to application.css.scss (using .sass doesn't work for me). Remove everything except require self . Include your global @import instructions @import .

One more note: you will need to add all the css files as @import manually to your application.css.scss . I usually create an app/assets/stylesheets/app folder and add @import app/**/* as the final entry in application.css.scss

Hope this helps.

Answer 2

I fixed the problem using the following help: SASS - use variables for multiple files .

Basically, you create a main file to store all your variables, etc., and then import the main file into each fragment that refers to your variables. One snag I came across was using mixins. I had to import the mixin file into master so that these variables work in other fragments.