SCSS Mixins文件未加载

时间:2015-11-25 22:34:42

标签: css ruby-on-rails sass

我收到了一堆前端代码,可以与我现有的Rails应用程序集成。另一个开发人员使用SCSS,并按如下方式构建他们的文件:

File Structure

风格/ styles.scss

@import "mixins";

@import "1-settings/colors",
        "1-settings/fonts",
        "1-settings/sizes";

@import "2-generic/reset",
        "2-generic/normalize",
        "2-generic/structure";

@import "3-base/body",
        "3-base/headings";

@import "4-components/buttons",
        "4-components/forms",
        "4-components/grid", 
        "4-components/section";

@import "5-objects/banner",
        "5-objects/card",
        "5-objects/footer",
        "5-objects/header",
        "5-objects/mobile-nav";

@import "6-pages/404",
        "6-pages/about",
        "6-pages/application",
        "6-pages/dashboard",
        "6-pages/home",
        "6-pages/profile",
        "6-pages/signup",
        "6-pages/training";

@import "utility";

2-generic / reset 中,我在 _mixins 部分中定义的mixin是@included,但我不断收到错误:

Sass::SyntaxError in Pages#index
Undefined mixin 'vendor'.


app/assets/stylesheets/styles/2-generic/_reset.scss:14:in `vendor'
app/assets/stylesheets/styles/2-generic/_reset.scss:14
sass (3.4.19) lib/sass/tree/visitors/perform.rb:349:in `block in visit_mixin'
sass (3.4.19) lib/sass/stack.rb:98:in `block in with_mixin'
sass (3.4.19) lib/sass/stack.rb:115:in `with_frame'
sass (3.4.19) lib/sass/stack.rb:98:in `with_mixin'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:347:in `visit_mixin'
sass (3.4.19) lib/sass/tree/visitors/base.rb:36:in `visit'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:158:in `block in visit'
sass (3.4.19) lib/sass/stack.rb:79:in `block in with_base'
sass (3.4.19) lib/sass/stack.rb:115:in `with_frame'
sass (3.4.19) lib/sass/stack.rb:79:in `with_base'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:158:in `visit'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:431:in `block (2 levels) in visit_rule'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:431:in `map'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:431:in `block in visit_rule'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:179:in `with_environment'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:429:in `visit_rule'
sass (3.4.19) lib/sass/tree/visitors/base.rb:36:in `visit'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:158:in `block in visit'
sass (3.4.19) lib/sass/stack.rb:79:in `block in with_base'
sass (3.4.19) lib/sass/stack.rb:115:in `with_frame'
sass (3.4.19) lib/sass/stack.rb:79:in `with_base'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:158:in `visit'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:431:in `block (2 levels) in visit_rule'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:431:in `map'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:431:in `block in visit_rule'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:179:in `with_environment'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:429:in `visit_rule'
sass (3.4.19) lib/sass/tree/visitors/base.rb:36:in `visit'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:158:in `block in visit'
sass (3.4.19) lib/sass/stack.rb:79:in `block in with_base'
sass (3.4.19) lib/sass/stack.rb:115:in `with_frame'
sass (3.4.19) lib/sass/stack.rb:79:in `with_base'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:158:in `visit'
sass (3.4.19) lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
sass (3.4.19) lib/sass/tree/visitors/base.rb:52:in `map'
sass (3.4.19) lib/sass/tree/visitors/base.rb:52:in `visit_children'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:167:in `block in visit_children'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:179:in `with_environment'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:166:in `visit_children'
sass (3.4.19) lib/sass/tree/visitors/base.rb:36:in `block in visit'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:186:in `visit_root'
sass (3.4.19) lib/sass/tree/visitors/base.rb:36:in `visit'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:157:in `visit'
sass (3.4.19) lib/sass/tree/visitors/perform.rb:8:in `visit'
sass (3.4.19) lib/sass/tree/root_node.rb:36:in `css_tree'
sass (3.4.19) lib/sass/tree/root_node.rb:20:in `render'
sass (3.4.19) lib/sass/engine.rb:278:in `render'
sass-rails (5.0.4) lib/sass/rails/template.rb:47:in `evaluate'
tilt (2.0.1) lib/tilt/template.rb:96:in `render'
sprockets (3.4.0) lib/sprockets/legacy_tilt_processor.rb:25:in `call'
sprockets (3.4.0) lib/sprockets/processor_utils.rb:75:in `call_processor'
sprockets (3.4.0) lib/sprockets/processor_utils.rb:57:in `block in call_processors'
sprockets (3.4.0) lib/sprockets/processor_utils.rb:56:in `reverse_each'
sprockets (3.4.0) lib/sprockets/processor_utils.rb:56:in `call_processors'
sprockets (3.4.0) lib/sprockets/loader.rb:134:in `load_from_unloaded'
sprockets (3.4.0) lib/sprockets/loader.rb:60:in `block in load'
sprockets (3.4.0) lib/sprockets/loader.rb:318:in `fetch_asset_from_dependency_cache'
sprockets (3.4.0) lib/sprockets/loader.rb:44:in `load'
sprockets (3.4.0) lib/sprockets/cached_environment.rb:20:in `block in initialize'
sprockets (3.4.0) lib/sprockets/cached_environment.rb:47:in `yield'
sprockets (3.4.0) lib/sprockets/cached_environment.rb:47:in `load'
sprockets (3.4.0) lib/sprockets/bundle.rb:23:in `block in call'
sprockets (3.4.0) lib/sprockets/utils.rb:183:in `dfs'
sprockets (3.4.0) lib/sprockets/bundle.rb:24:in `call'
sprockets (3.4.0) lib/sprockets/processor_utils.rb:75:in `call_processor'
sprockets (3.4.0) lib/sprockets/processor_utils.rb:57:in `block in call_processors'
sprockets (3.4.0) lib/sprockets/processor_utils.rb:56:in `reverse_each'
sprockets (3.4.0) lib/sprockets/processor_utils.rb:56:in `call_processors'
sprockets (3.4.0) lib/sprockets/loader.rb:134:in `load_from_unloaded'
sprockets (3.4.0) lib/sprockets/loader.rb:60:in `block in load'
sprockets (3.4.0) lib/sprockets/loader.rb:318:in `fetch_asset_from_dependency_cache'
sprockets (3.4.0) lib/sprockets/loader.rb:44:in `load'
sprockets (3.4.0) lib/sprockets/cached_environment.rb:20:in `block in initialize'
sprockets (3.4.0) lib/sprockets/cached_environment.rb:47:in `yield'
sprockets (3.4.0) lib/sprockets/cached_environment.rb:47:in `load'
sprockets (3.4.0) lib/sprockets/base.rb:66:in `find_asset'
sprockets (3.4.0) lib/sprockets/environment.rb:30:in `find_asset'
sprockets (3.4.0) lib/sprockets/base.rb:92:in `[]'
sprockets-rails (2.3.3) lib/sprockets/rails/helper.rb:230:in `lookup_asset_for_path'
sprockets-rails (2.3.3) lib/sprockets/rails/helper.rb:190:in `check_errors_for'
sprockets-rails (2.3.3) lib/sprockets/rails/helper.rb:159:in `block in stylesheet_link_tag'
sprockets-rails (2.3.3) lib/sprockets/rails/helper.rb:158:in `map'
sprockets-rails (2.3.3) lib/sprockets/rails/helper.rb:158:in `stylesheet_link_tag'
app/views/layouts/application.html.erb:24:in `_app_views_layouts_application_html_erb___1130277748_57752820'
actionview (4.2.0) lib/action_view/template.rb:145:in `block in render'
activesupport (4.2.0) lib/active_support/notifications.rb:166:in `instrument'
actionview (4.2.0) lib/action_view/template.rb:333:in `instrument'
actionview (4.2.0) lib/action_view/template.rb:143:in `render'
actionview (4.2.0) lib/action_view/renderer/template_renderer.rb:66:in `render_with_layout'
actionview (4.2.0) lib/action_view/renderer/template_renderer.rb:52:in `render_template'
actionview (4.2.0) lib/action_view/renderer/template_renderer.rb:14:in `render'
actionview (4.2.0) lib/action_view/renderer/renderer.rb:42:in `render_template'
actionview (4.2.0) lib/action_view/renderer/renderer.rb:23:in `render'
actionview (4.2.0) lib/action_view/rendering.rb:100:in `_render_template'
actionpack (4.2.0) lib/action_controller/metal/streaming.rb:217:in `_render_template'
actionview (4.2.0) lib/action_view/rendering.rb:83:in `render_to_body'
actionpack (4.2.0) lib/action_controller/metal/rendering.rb:32:in `render_to_body'
actionpack (4.2.0) lib/action_controller/metal/renderers.rb:37:in `render_to_body'
actionpack (4.2.0) lib/abstract_controller/rendering.rb:25:in `render'
actionpack (4.2.0) lib/action_controller/metal/rendering.rb:16:in `render'
actionpack (4.2.0) lib/action_controller/metal/instrumentation.rb:41:in `block (2 levels) in render'
activesupport (4.2.0) lib/active_support/core_ext/benchmark.rb:12:in `block in ms'
C:/Ruby200-x64/lib/ruby/2.0.0/benchmark.rb:296:in `realtime'
activesupport (4.2.0) lib/active_support/core_ext/benchmark.rb:12:in `ms'
actionpack (4.2.0) lib/action_controller/metal/instrumentation.rb:41:in `block in render'
actionpack (4.2.0) lib/action_controller/metal/instrumentation.rb:84:in `cleanup_view_runtime'
activerecord (4.2.0) lib/active_record/railties/controller_runtime.rb:25:in `cleanup_view_runtime'
actionpack (4.2.0) lib/action_controller/metal/instrumentation.rb:40:in `render'
actionpack (4.2.0) lib/action_controller/metal/implicit_render.rb:10:in `default_render'
actionpack (4.2.0) lib/action_controller/metal/implicit_render.rb:5:in `send_action'
actionpack (4.2.0) lib/abstract_controller/base.rb:198:in `process_action'
actionpack (4.2.0) lib/action_controller/metal/rendering.rb:10:in `process_action'
actionpack (4.2.0) lib/abstract_controller/callbacks.rb:20:in `block in process_action'
activesupport (4.2.0) lib/active_support/callbacks.rb:117:in `call'
activesupport (4.2.0) lib/active_support/callbacks.rb:117:in `call'
activesupport (4.2.0) lib/active_support/callbacks.rb:234:in `block in halting'
activesupport (4.2.0) lib/active_support/callbacks.rb:169:in `call'
activesupport (4.2.0) lib/active_support/callbacks.rb:169:in `block in halting'
activesupport (4.2.0) lib/active_support/callbacks.rb:92:in `call'
activesupport (4.2.0) lib/active_support/callbacks.rb:92:in `_run_callbacks'
activesupport (4.2.0) lib/active_support/callbacks.rb:734:in `_run_process_action_callbacks'
activesupport (4.2.0) lib/active_support/callbacks.rb:81:in `run_callbacks'
actionpack (4.2.0) lib/abstract_controller/callbacks.rb:19:in `process_action'
actionpack (4.2.0) lib/action_controller/metal/rescue.rb:29:in `process_action'
actionpack (4.2.0) lib/action_controller/metal/instrumentation.rb:31:in `block in process_action'
activesupport (4.2.0) lib/active_support/notifications.rb:164:in `block in instrument'
activesupport (4.2.0) lib/active_support/notifications/instrumenter.rb:20:in `instrument'
activesupport (4.2.0) lib/active_support/notifications.rb:164:in `instrument'
actionpack (4.2.0) lib/action_controller/metal/instrumentation.rb:30:in `process_action'
actionpack (4.2.0) lib/action_controller/metal/params_wrapper.rb:250:in `process_action'
activerecord (4.2.0) lib/active_record/railties/controller_runtime.rb:18:in `process_action'
actionpack (4.2.0) lib/abstract_controller/base.rb:137:in `process'
actionview (4.2.0) lib/action_view/rendering.rb:30:in `process'
actionpack (4.2.0) lib/action_controller/metal.rb:195:in `dispatch'
actionpack (4.2.0) lib/action_controller/metal/rack_delegation.rb:13:in `dispatch'
actionpack (4.2.0) lib/action_controller/metal.rb:236:in `block in action'
actionpack (4.2.0) lib/action_dispatch/routing/route_set.rb:73:in `call'
actionpack (4.2.0) lib/action_dispatch/routing/route_set.rb:73:in `dispatch'
actionpack (4.2.0) lib/action_dispatch/routing/route_set.rb:42:in `serve'
actionpack (4.2.0) lib/action_dispatch/journey/router.rb:43:in `block in serve'
actionpack (4.2.0) lib/action_dispatch/journey/router.rb:30:in `each'
actionpack (4.2.0) lib/action_dispatch/journey/router.rb:30:in `serve'
actionpack (4.2.0) lib/action_dispatch/routing/route_set.rb:802:in `call'
warden (1.2.3) lib/warden/manager.rb:35:in `block in call'
warden (1.2.3) lib/warden/manager.rb:34:in `catch'
warden (1.2.3) lib/warden/manager.rb:34:in `call'
rack (1.6.4) lib/rack/etag.rb:24:in `call'
rack (1.6.4) lib/rack/conditionalget.rb:25:in `call'
rack (1.6.4) lib/rack/head.rb:13:in `call'
actionpack (4.2.0) lib/action_dispatch/middleware/params_parser.rb:27:in `call'
actionpack (4.2.0) lib/action_dispatch/middleware/flash.rb:260:in `call'
rack (1.6.4) lib/rack/session/abstract/id.rb:225:in `context'
rack (1.6.4) lib/rack/session/abstract/id.rb:220:in `call'
actionpack (4.2.0) lib/action_dispatch/middleware/cookies.rb:560:in `call'
activerecord (4.2.0) lib/active_record/query_cache.rb:36:in `call'
activerecord (4.2.0) lib/active_record/connection_adapters/abstract/connection_pool.rb:647:in `call'
activerecord (4.2.0) lib/active_record/migration.rb:378:in `call'
actionpack (4.2.0) lib/action_dispatch/middleware/callbacks.rb:29:in `block in call'
activesupport (4.2.0) lib/active_support/callbacks.rb:88:in `call'
activesupport (4.2.0) lib/active_support/callbacks.rb:88:in `_run_callbacks'
activesupport (4.2.0) lib/active_support/callbacks.rb:734:in `_run_call_callbacks'
activesupport (4.2.0) lib/active_support/callbacks.rb:81:in `run_callbacks'
actionpack (4.2.0) lib/action_dispatch/middleware/callbacks.rb:27:in `call'
actionpack (4.2.0) lib/action_dispatch/middleware/reloader.rb:73:in `call'
actionpack (4.2.0) lib/action_dispatch/middleware/remote_ip.rb:78:in `call'
actionpack (4.2.0) lib/action_dispatch/middleware/debug_exceptions.rb:17:in `call'
web-console (2.2.1) lib/web_console/middleware.rb:39:in `call'
actionpack (4.2.0) lib/action_dispatch/middleware/show_exceptions.rb:30:in `call'
railties (4.2.0) lib/rails/rack/logger.rb:38:in `call_app'
railties (4.2.0) lib/rails/rack/logger.rb:20:in `block in call'
activesupport (4.2.0) lib/active_support/tagged_logging.rb:68:in `block in tagged'
activesupport (4.2.0) lib/active_support/tagged_logging.rb:26:in `tagged'
activesupport (4.2.0) lib/active_support/tagged_logging.rb:68:in `tagged'
railties (4.2.0) lib/rails/rack/logger.rb:20:in `call'
actionpack (4.2.0) lib/action_dispatch/middleware/request_id.rb:21:in `call'
rack (1.6.4) lib/rack/methodoverride.rb:22:in `call'
rack (1.6.4) lib/rack/runtime.rb:18:in `call'
activesupport (4.2.0) lib/active_support/cache/strategy/local_cache_middleware.rb:28:in `call'
rack (1.6.4) lib/rack/lock.rb:17:in `call'
actionpack (4.2.0) lib/action_dispatch/middleware/static.rb:113:in `call'
rack (1.6.4) lib/rack/sendfile.rb:113:in `call'
railties (4.2.0) lib/rails/engine.rb:518:in `call'
railties (4.2.0) lib/rails/application.rb:164:in `call'
rack (1.6.4) lib/rack/lock.rb:17:in `call'
rack (1.6.4) lib/rack/content_length.rb:15:in `call'
rack (1.6.4) lib/rack/handler/webrick.rb:88:in `service'
C:/Ruby200-x64/lib/ruby/2.0.0/webrick/httpserver.rb:138:in `service'
C:/Ruby200-x64/lib/ruby/2.0.0/webrick/httpserver.rb:94:in `run'
C:/Ruby200-x64/lib/ruby/2.0.0/webrick/server.rb:295:in `block in start_thread'

我尝试更改所有内容的顺序,将所有内容移动到同一目录中,并在application.css文件中移动/删除/添加 * = requires 无效。 我做错了什么?

修改 2-通用/ _reset.scss

/*-----------------------------------*\
 *   generic/reset                   *
\*-----------------------------------*/


/**
 * Apply border box to all elements
 */
* {
    &,
    &:before,
    &:after{
        @include vendor(box-sizing, border-box);
    }

    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; /* For some Androids */
}


/**
 * The usual...
 */
h1,h2,h3,h4,h5,h6,
p,blockquote,pre,
dl,dd,ol,ul,
form,fieldset,legend,
table,th,td,caption,
hr {
    margin:0;
    padding:0;
}


/**
 * Give a help cursor to elements that give extra info on `:hover`.
 */
abbr[title],dfn[title]{
    cursor:help;
}


/**
 * Remove underlines from potentially troublesome elements.
 */
u,ins {
    text-decoration:none;
}


/**
 * Apply faux underline via `border-bottom`.
 */
ins {
    border-bottom:1px solid;
}


/**
 * So that `alt` text is visually offset if images don’t load.
 */
img {
    font-style:italic;
    max-width: 100%;
    max-height: 100%;
}
a img { border: none; }


/**
 * Give form elements some cursor interactions...
 */
label,
input,
textarea,
button,
select,
option {
    cursor:pointer;
}

.text-input:active,
.text-input:focus,
textarea:active,
textarea:focus{
    cursor:text;
    outline:none;
}

编辑2 _mixins.scss

/*-----------------------------------*\
 *   tools/mixins                    *
\*-----------------------------------*/


/**
 * Adds vendor specific prefixes for certain CSS3 properties
 */
@mixin vendor($property, $value){
    -webkit-#{$property}:$value;
       -moz-#{$property}:$value;
        -ms-#{$property}:$value;
         -o-#{$property}:$value;
            #{$property}:$value;
}


/**
 * Takes two colors and a direction to create a gradient background
 * @include gradient-bg(#FFFFFF, #000000, vertical);
 */
@mixin gradient-bg($color1, $color2, $direction) {
    @if ($direction == vertical) {
        $end_position: bottom;
        $linear_end_position: left bottom;
    }
    @else if ($direction == horizontal) {
        $end_position: right;
        $linear_end_position: right top;
    }

    background-image: -webkit-gradient(linear, left top, $linear_end_position, color-stop(0, $color1), color-stop(1, $color2));
    background-image: -o-linear-gradient($end_position, $color1 0%, $color2 100%);
    background-image: -moz-linear-gradient($end_position, $color1 0%, $color2 100%);
    background-image: -webkit-linear-gradient($end_position, $color1 0%, $color2 100%);
    background-image: -ms-linear-gradient($end_position, $color1 0%, $color2 100%);
    background-image: linear-gradient(to $end_position, $color1 0%, $color2 100%);
}


/**
 * Min-width breakpoint
 */
@mixin bp-min($size) {
    @media screen and (min-width: #{$size}) {
        @content; 
    }
}


/**
 * Max-width breakpoint
 * We use $size - 1 so default sizes can be used. ex. $size--lap instead of 1023
 */
@mixin bp-max($size) {
    @media screen and (max-width: #{$size - 1}) {
        @content;
    }
}

1 个答案:

答案 0 :(得分:-1)

尝试将您尝试添加的mixin移至重置文件的顶部,看看是否仍然出现错误。 也许这是一个简单的mixin定义问题或名称拼写错误,如果它有用,那么你知道导入有问题。