Rails4 Foundation4 未定义的混合

Question

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

宝石文件

    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

我遇到了同样的问题...这是我的 app.scss...一切正常，但我无法使用基础 mixins 我正在使用 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;
                    }
                }
            }
        }
    }
}

Answer 2

当我想在我的 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

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