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