我收到了一堆前端代码,可以与我现有的Rails应用程序集成。另一个开发人员使用SCSS,并按如下方式构建他们的文件:
风格/ 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;
}
}
答案 0 :(得分:-1)
尝试将您尝试添加的mixin移至重置文件的顶部,看看是否仍然出现错误。 也许这是一个简单的mixin定义问题或名称拼写错误,如果它有用,那么你知道导入有问题。