CODEWITHSUNDEEP
ruby-on-railssasszurb-foundationruby-on-rails-4
Ayonix
Ayonix

Reputation: 2002

Rails4 Foundation4 undefined mixin

I can't use mixins of Foundation in my rails app (error: Undefined mixin 'column').

Gemfile

    gem 'rails', '~> 4.0.0'
    gem 'sass-rails'
    gem 'zurb-foundation'

Application.css.scss

    /*
    *= require_self
    *= require foundation_and_overrides
    *= require_tree .
    */

layout.css.scss

    section {
      @include column(12);
    }

    aside {
      @include column(4);
    }

And there it does not find the mixin. I've also looked at https://github.com/zurb/foundation/issues/1230 and https://github.com/zurb/foundation/issues/2128 but none of them seemed to work.

Upvotes: 2

Views: 3419

Answers (2)

alexti
alexti

Reputation: 46

I had the same problem when I wanted to use a mixing in my stories.css.scss I had to remove the requires and import my scss files manually.

#application.css.scss
@import "foundation_and_overrides";
@import "stories";

source: https://github.com/zurb/foundation/issues/2128#issuecomment-17912556

Additionally I had following error message

Syntax error: File to import not found or unreadable: foundation/foundation-global.

I had to change following line in foundation_and_overrides.css.scss

#foundation_and_overrides.css.scss
@import "foundation/foundation-global";

to

#foundation_and_overrides.css.scss
@import "foundation/variables";

source: https://github.com/zurb/foundation/issues/1792#issuecomment-17041016

I hope that helps. It took me some time to get this working.

Upvotes: 3

ItsGeorge
ItsGeorge

Reputation: 2201

I'm experiencing the same issue... here's my app.scss... Everything works but I can't use foundation mixins I'm watching the file with Compass.

// Global Foundation Settings
@import "settings";

// Comment out this import if you don't want to use normalize
@import "normalize";

// Comment out this import if you are customizing you imports below
@import "foundation";
@import "compass";
@import "compass/css3";

@import "foundation/variables";

// Import specific parts of Foundation by commenting the import "foundation"
// and uncommenting what you want below. You must uncomment the following if customizing

@import "foundation/components/global"; // *always required
@import "foundation/components/grid";

//
// Use this grid if you want to start using the new Foundation 5 grid early.
// It will change breakpoints to min-width: 640px and 1024px.
//
@import "foundation/components/grid-5";
//

@import "foundation/components/visibility";
@import "foundation/components/block-grid";
@import "foundation/components/type";
@import "foundation/components/buttons";
@import "foundation/components/forms"; // *requires components/buttons
@import "foundation/components/custom-forms"; // *requires components/buttons, components/forms
@import "foundation/components/button-groups"; // *requires components/buttons
@import "foundation/components/dropdown-buttons"; // *requires components/buttons
@import "foundation/components/split-buttons"; // *requires components/buttons
@import "foundation/components/flex-video";
@import "foundation/components/section";
@import "foundation/components/top-bar";  // *requires components/grid
@import "foundation/components/orbit";
@import "foundation/components/reveal";
@import "foundation/components/joyride";
@import "foundation/components/clearing";
@import "foundation/components/alert-boxes";
@import "foundation/components/breadcrumbs";
@import "foundation/components/keystrokes";
@import "foundation/components/labels";
@import "foundation/components/inline-lists";
@import "foundation/components/pagination";
@import "foundation/components/panels";
@import "foundation/components/pricing-tables";
@import "foundation/components/progress-bars";
@import "foundation/components/side-nav";
@import "foundation/components/sub-nav";
@import "foundation/components/switch";
@import "foundation/components/magellan";
@import "foundation/components/tables";
@import "foundation/components/thumbs";
@import "foundation/components/tooltips";
@import "foundation/components/dropdown";


@media only screen and (min-width: $small-screen) {

    nav.top-bar > section > ul > li.has-dropdown{
        position: static;
        & > .dropdown{
            @include outerRow();

            & > li.has-dropdown{
                @include column(3);
                min-width: auto;

                .dropdown{

                    position: static;
                    visibility: inherit;
                    top: auto !important;
                    left: auto !important;
                    padding: 0;
                    min-width: auto;
                    li{
                        @include column(12);
                         min-width: auto;
                    }
                }
            }
        }
    }
}

Upvotes: 1

Related Questions