Sass undefined variable on precompilation

Question

I'm upgrading our Rails (3.2.17) app over to sass and I'm running into "undefined variable" errors during asset precompilation. I use @import to include my snippets in the master.scss file. This setup works great locally, but errors on precompliation. The only way to get around the errors is to @import snippets into snippets which reference the mixins and variables defined in the first snippet.

For example: I @import 'fonts' and 'buttons' into master.scss and then I have to @import 'fonts' a second time into 'buttons' because it uses a variable defined in 'fonts'. This gets around the precompliation error, but it's not ideal because instead of only one instance of 'fonts' being loaded into the app, there is now two.

@importing all the snippets only the one time into master.scss works locally when I don't precompile. There has to be a solution to this. Any thoughts?

possible duplicate of [False positive "undefined variable" error when compiling SCSS](http://stackoverflow.com/questions/17976140/false-positive-undefined-variable-error-when-compiling-scss) — cimmanon, Mar 14 '14 at 19:02
Maybe. My snippets have the leading underscore, and I'm not using the compass gem. — geraddavis, Mar 14 '14 at 19:25

score 26 · Answer 1 · answered Mar 14 '14 at 20:54

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

From SASS rails documentation.

Sprockets provides some directives that are placed inside of 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 well with Sass files. Instead, use Sass's native @import directive which sass-rails has customized to integrate with the conventions of your Rails projects.

Simply, rename your application.css to application.css.scss (using .sass didn't work for me). Remove everything other than require self. Include your global @import statements there.

One additional note is that you will need to add all css files as @import manually to your application.css.scss. I normally create a folder app/assets/stylesheets/app and add @import app/**/* as a final entry to the application.css.scss

I hope this helps.

I saw that, but wasn't the issue. I got it fixed in a different way. — geraddavis, Mar 14 '14 at 22:14
@anbiniyar, removing everything but "require_self" worked for me. Thanks — HermannHH, May 18 '15 at 19:58

score 6 · Answer 2 · edited May 23 '17 at 12:10

6

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

Basically you create a master file to hold all your variables and such, then import the master file into every snippet that references your variables. The one snag I ran into was with the use of mixins. I had to import the mixin file into master for the those variables to work in other snippets.

edited May 23 '17 at 12:10

Community

1
1

answered Mar 14 '14 at 22:18

geraddavis

355
1
3
16

Sass undefined variable on precompilation

2 Answers2