2

我不能在我的 Rails 应用程序中使用 Foundation 的 mixin（错误：未定义的 mixin 'column'）。

宝石文件

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

应用程序.css.scss

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

布局.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但它们似乎都不起作用。

4

2 回答 2

3

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

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

于 2013-09-02T14:36:25.263 回答
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;
                    }
                }
            }
        }
    }
}
于 2013-08-15T16:30:55.183 回答