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?

Metrology

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

Noctilucent

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.

Barbarous

Answer 3

According to the Change Log the outer-container mixin has been removed as of version 2.0.0. The highest version you can use with outer-container is 1.8.0. When adding Neat via Bundler, you will get 2.0 or higher unless you specify a version in your Gemfile.

The new way to do this looks much simpler, but that's little comfort if you have a bunch of unsupported scss.

Munt

Answer 4

FWIW this is the issue reported https://github.com/thoughtbot/bourbon/issues/120, Using jacklin's comment about adding the import statements directly to my main css file resolved it. However, I'd like to have this problem fixed since I dont really want to keep adding those import statements to each file I wish to use the mixins for

Ruthanneruthe

Answer 5

I have had the same problem.

I had a div using @include outer-container, and a second div containing @include span-columns(8). The second div incorrectly sat outside the first, producing the misleading error "Undefined mixin 'outer-container'". Moving the second div inside the first (within the outer-container - in the CSS and HTML) corrected the problem.

For the problem above, you must do the same thing by making sure the p tag is a child of the footer.

Winther