Rails4 Foundation4 undefined mixin

Question

我无法在我的rails应用程序中使用Foundation的mixins（错误：未定义的mixin'列'）。

的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);
    }

在那里找不到mixin。 我也看了https://github.com/zurb/foundation/issues/1230 和https://github.com/zurb/foundation/issues/2128，但似乎都没有。

Answer 1

当我想在stories.css.scss中使用混音时，我遇到了同样的问题 我必须删除requires并手动导入我的scss文件。

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

来源：https://github.com/zurb/foundation/issues/2128#issuecomment-17912556

此外，我有以下错误消息

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

我必须在foundation_and_overrides.css.scss

中更改以下行

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

到

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

来源：https://github.com/zurb/foundation/issues/1792#issuecomment-17041016

我希望有所帮助。我花了一些时间来完成这项工作。

Answer 2

我遇到了同样的问题......这是我的app.scss ...一切正常但我不能使用粉底混合我正在用指南针观看文件。

// 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;
                    }
                }
            }
        }
    }
}