Undefined mixin with Bourbon and Neat gems

Question

I am using bourbon and neat gems for create the design of a rails application. My application.css.scss contains this:

 @import "bourbon";
 @import "neat";
 @import "main";

But if I run 'rake assets:precompile' then happens this error:

rake aborted!
Undefined mixin 'outer-container'.
(in /Users/anonymous/example/app/assets/stylesheets/admin/main.css.scss)
/Users/anonymous/example/app/assets/stylesheets/admin/main.css.scss:5:in  `outer-container'
/Users/anonymous/example/app/assets/stylesheets/admin/main.css.scss:5

The file main.css.scss contains this:

footer#page_footer { 
 @include outer-container;
 nav{
  @include span-columns(6);
  @include shift(3);
  section#about_me_footer, section#contact_footer, section#miscellaneous_footer {
  @include span-columns(2 of 6);
 }
}
p {
 @include span-columns(6);
 @include shift(3);
}
}

Someone can give me some suggestions?

Answer 1

I was having the same problem. I was able to get it working in two different ways.

The first way is probably less desirable but you can add your code right in the application.css.scss file:

div.container {
  @include outer-container;
}

Alternatively, you can add:

@import "bourbon";
@import "neat";

To the top of your main.css.scss file.
This allows you to keep your styles organized.

The bourbon site links to a page in their wiki regarding this problem, but the solution mentioned didn't work for me:

https://github.com/thoughtbot/bourbon/wiki/Rails-Help-%5C-Undefined-mixin

Answer 2

I had this same problem. The solution for me was to rename a partial file from layout.css.scss to _layout.css.scss. Any files making use of SASS mixins need to be included after those mixins are loaded in. In this case it was trying to precompile the layout.css file alone, though it did not require the source of the mixins it was referencing. Adding the underscore makes the precompiler ignore that file until another file requires it.