Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Undefined mixins #2128

Closed
dannytatom opened this Issue · 18 comments
@dannytatom

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);
}
@dannytatom

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

@mhayes mhayes was assigned
@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".

@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!

@mhayes mhayes closed this
@Maxim-Filimonov Maxim-Filimonov referenced this issue from a commit in Maxim-Filimonov/foundation
@Maxim-Filimonov Maxim-Filimonov Update docs with version of import which includes override
See discussion on the issue #2128
3bd0772
@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.

@tylermarien tylermarien referenced this issue from a commit
Commit has since been removed from the repository and is no longer available.
@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.

@RobertDober RobertDober referenced this issue from a commit in RobertDober/zurb-based-resume
@RobertDober RobertDober workaround for foundation issue 2128 zurb/foundation#2128 9cc670a
@mhayes mhayes was unassigned by dannytatom
@pbonnell

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.