Undefined mixins

[its-danny]

Fresh install of Foundation 4.1.1 in a Rails 4 app. Foundation itself seems to load fine, and I can use all features if I go the route of adding classes to everything. But trying to use any mixin results in undefined mixin.

application.css.scss:

 *= require_self
 *= require foundation_and_overrides
 *= require general_foundicons
 *= require_tree .

layout.css.scss

#container {
  @include grid-row;
  @include grid-column(10, false, true);
}

[its-danny]

FWIW, It works if I @import "foundation" in layout.css.scss, but then any changes in foundation_and_overrides.css.scss is overwritten back to the defaults.

[Maxim-Filimonov]

Have the same problem found a workaround
Use

@import 'foundation/foundation-global'
@import 'foundation/components/grid'

instead of

@import "foundation"

However this duplicates all foundation class definitions in every file you import it in :\ Far from good solution
UPDATE:
Just checked it's the same problem with a new rails 3 project

[Rataxes]

I've got the same problem in 4.1.6. The "far from good"-solution above works though.

[Maxim-Filimonov]

Update on this one
I found that if I switch to application.css.scss(or application.sass) instead of standard application.css and replace all require with explicit import then it works without importing foundation.
My application.sass

@import 'foundation_and_overrides'
@import 'registrations'

Then in registrations.css.scss mixins can be used without import

header {
}
.entry-content {
  @include grid-row;
  .app-preview {
    @include grid-column(4);
    @extend .hide-for-small;
    @extend .ie-column-4;
  }
  .sign-up{
    @include grid-column(12);
    @media #{$small} {
      @include grid-column(8);
    }
    input[type=submit] {
      @extend .button;
      @extend .radius;
    }
  }
}

I'll look into updating docs later this/next week.

[tkuichooseyou]

I still have the same problem and none of the workarounds mentioned work for me. I'm on Foundation 4.2.2, and Rails 4(rc2). Foundation works fine even though inside my foundation_and_overrides.scss, the @import 'foundation' causes macvim to complain "file to import not found or unreadable: foundation".

[alexmcpherson]

👍

[sjmadsen]

Same problem here. Rails 4, Foundation 4.2.2. I'm trying to adhere to the "Rails Way", keeping CSS split up among many .scss files and letting the asset pipeline do its thing. I can't use mixins without the already noted problems.

[asecondwill]

Same with Rails 3.

Doing this:
@import 'foundation_and_overrides';
results in
File to import not found or unreadable: foundation/common/ratios.

Which i previously got before i realised i had to include compas_rails gem. Not sure why its cropped back in? Ideally i'd use sass rather than asset pipeline for this stuff but thats throwing errors too, probably because i used the gem.

[mhayes]

Unfortunately it looks like this is an issue with the way the asset pipeline works in Rails. The solution proposed by @Maxim-Filimonov is the way to go in this case.

Cheers!

[bradfeehan]

I found another way to improve this situation.

1. In foundation_and_overrides.css.scss, comment out the $include-html-classes line (defaults to true)
2. In application.css, require foundation_and_overrides using Rails' assets pipeline
3. Create a new foundation_mixins_only.css.scss, which disables $include-html-classes and imports all of Foundation using Sass' @import
4. Import foundation_mixins_only using Sass' @import in every SCSS file that you'll use Foundation's mixins

Steps 1 and 2 put all of Foundation's base styles and classes into foundation_and_overrides.css (~130KB).

Steps 3 and 4 put all of Foundation's mixins into foundation_mixins_only.css.scss, but the compiled output of this file alone is empty. You can @import foundation_mixins_only in every other SCSS file to access Foundation's mixins, without adding extra styles to the compiled output.

Summary

application.css:

/* ...
 *= require foundation_and_overrides
 * ...

foundation_and_overrides.css.scss:

// my other settings...
// $include-html-classes: true;
// ...

foundation_mixins_only.css.scss:

$include-html-classes: false
@import 'foundation_and_overrides'

This seems like it meets all my needs, I'll continue to test and will update with any issues.

EDIT: foundations_mixins_only.css.scss should import foundation_and_overrides instead of just foundation, to ensure the overridden settings are used in the mixins too. Updated above.

[brookr]

Just hit this in Rails 4 and F5. Only @bradfeehan's solution seems to work. Thanks for posting Brad!

What needs to change to make this work out of the box? I'm not clear on how this workaround actually fixes the issue.

[bradfeehan]

I'm not sure that the workaround I posted is that undesirable -- I think it's a matter of preference, part of the way you want to set up your own app. The Foundation Rails gem integrates Foundation with Rails one way; this is just an alternative way to set it up.

Especially in this case, it seems like the users affected want to use Foundation with Rails in a slightly different way to the mainstream (otherwise the default installation method would be better suited to what we want to do).

I also don't know if my method is strictly "better" than the default. It's certainly better for me, but it might break something which is used very commonly.

[nicholasray]

I've noticed that with Foundation 5 and using the @bradfeehan solution there are, in fact, some styles that still get copied into each stylesheet that imports foundation_mixins_only. For example these styles get imported:

/* line 259, C:/Ruby193/lib/ruby/gems/1.9.1/gems/foundation-rails-5.1.1.0/vendor/assets/stylesheets/foundation/components/_global.scss */
meta.foundation-version {
font-family: "/5.1.0/";
}

/* line 264, C:/Ruby193/lib/ruby/gems/1.9.1/gems/foundation-rails-5.1.1.0/vendor/assets/stylesheets/foundation/components/_global.scss */
meta.foundation-mq-small {
font-family: "/only screen and (max-width: 40em)/";
width: 0em;
}

/* line 269, C:/Ruby193/lib/ruby/gems/1.9.1/gems/foundation-rails-5.1.1.0/vendor/assets/stylesheets/foundation/components/_global.scss */
meta.foundation-mq-medium {
font-family: "/only screen and (min-width:40.063em)/";
width: 40.063em;
}

Is there a solution that fixes this? This would be a ton easier if Foundation just had a separate mixin file and did not couple their mixins to their components.

[coorasse]

On Stackoverflow someone says he solved adding
@import "foundation/functions";
@include exports("global") {}
@import "foundation/components/global";

on top of the file....works also for me

[nicholasray]

@coorasse unfortunately, I'm getting an undefined mixin alert message when I use this.

[djalmaaraujo]

I renamed my application.css to application.css.scss and put:

@import "foundation_and_overrides";
@import "custom/buttons"; # my custom file

Working pretty great.

[pbonnell]

Rails 3.2.19 , foundation-rails (5.3.1.0)
@djalmaaraujo solved

[djalmaaraujo]

👍

[TheNeikos]

How is this fixed? I am still unable to get mixins working.

My application.css.scss:

@import "foundation_and_overrides";

@import "categories";
@import "main";
@import "posts";
@import "sessions";
@import "topics";
@import "users";

However I still get an error invalid mixing panel,
@djalmaaraujo did you do anything else?