New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Undefined mixins #2128

Closed
dannytatom opened this Issue Apr 5, 2013 · 19 comments

Comments

Projects
None yet
@dannytatom

dannytatom commented Apr 5, 2013

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

This comment has been minimized.

Show comment
Hide comment
@dannytatom

dannytatom Apr 5, 2013

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.

dannytatom commented Apr 5, 2013

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

This comment has been minimized.

Show comment
Hide comment
@Maxim-Filimonov

Maxim-Filimonov Apr 12, 2013

Contributor

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

Contributor

Maxim-Filimonov commented Apr 12, 2013

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

@ghost ghost assigned mhayes May 6, 2013

@Rataxes

This comment has been minimized.

Show comment
Hide comment
@Rataxes

Rataxes May 14, 2013

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

Rataxes commented May 14, 2013

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

@Maxim-Filimonov

This comment has been minimized.

Show comment
Hide comment
@Maxim-Filimonov

Maxim-Filimonov May 14, 2013

Contributor

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.

Contributor

Maxim-Filimonov commented May 14, 2013

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

This comment has been minimized.

Show comment
Hide comment
@tkuichooseyou

tkuichooseyou Jun 24, 2013

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".

tkuichooseyou commented Jun 24, 2013

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

This comment has been minimized.

Show comment
Hide comment
@alexmcpherson

alexmcpherson commented Jun 25, 2013

👍

@sjmadsen

This comment has been minimized.

Show comment
Hide comment
@sjmadsen

sjmadsen Jun 28, 2013

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.

sjmadsen commented Jun 28, 2013

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

This comment has been minimized.

Show comment
Hide comment
@asecondwill

asecondwill Jun 29, 2013

Contributor

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.

Contributor

asecondwill commented Jun 29, 2013

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

This comment has been minimized.

Show comment
Hide comment
@mhayes

mhayes Aug 14, 2013

Contributor

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!

Contributor

mhayes commented Aug 14, 2013

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 Aug 14, 2013

Maxim-Filimonov added a commit to Maxim-Filimonov/foundation that referenced this issue Aug 16, 2013

@bradfeehan

This comment has been minimized.

Show comment
Hide comment
@bradfeehan

bradfeehan Sep 9, 2013

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.

bradfeehan commented Sep 9, 2013

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

This comment has been minimized.

Show comment
Hide comment
@brookr

brookr Jan 16, 2014

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.

brookr commented Jan 16, 2014

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

This comment has been minimized.

Show comment
Hide comment
@bradfeehan

bradfeehan Jan 17, 2014

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.

bradfeehan commented Jan 17, 2014

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

This comment has been minimized.

Show comment
Hide comment
@nicholasray

nicholasray Feb 24, 2014

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.

nicholasray commented Feb 24, 2014

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

This comment has been minimized.

Show comment
Hide comment
@coorasse

coorasse Mar 7, 2014

Contributor

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

Contributor

coorasse commented Mar 7, 2014

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

This comment has been minimized.

Show comment
Hide comment
@nicholasray

nicholasray Mar 7, 2014

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

nicholasray commented Mar 7, 2014

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

@djalmaaraujo

This comment has been minimized.

Show comment
Hide comment
@djalmaaraujo

djalmaaraujo Apr 28, 2014

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

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

Working pretty great.

djalmaaraujo commented Apr 28, 2014

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

This comment has been minimized.

Show comment
Hide comment
@pbonnell

pbonnell Feb 25, 2015

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

pbonnell commented Feb 25, 2015

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

@djalmaaraujo

This comment has been minimized.

Show comment
Hide comment
@djalmaaraujo

djalmaaraujo commented Feb 25, 2015

👍

@TheNeikos

This comment has been minimized.

Show comment
Hide comment
@TheNeikos

TheNeikos Dec 6, 2015

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?

TheNeikos commented Dec 6, 2015

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment