Question

嘿我正在尝试学习rails并遵循rails教程。我正在使用SCSS向应用程序样式表添加一些元素，这就是我要添加的内容

/* miscellaneous */

  .debug_dump {
    clear: both;
    float: left;
    width: 100%;
    margin-top: 45px;
    @include box_sizing;
  }
}

但是当我在浏览器中查看它时，我收到此错误

Mixin box-sizing is missing argument $boxmodel.
  (in /Users/<mynamehere>/workspace/sample_app/app/assets/stylesheets/custom.css.scss:110)

<html>
    <head>
      <title><%= full_title(yield(:title)) %></title>
      <%= stylesheet_link_tag "application", media: "all",
                                             "data-turbolinks-track" => true %>
      <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
      <%= csrf_meta_tags %>

 Rails.root: /Users/<mynamehere>/workspace/sample_app

非常感谢任何帮助。如果您需要查看其他任何内容，请参阅我的github链接

Answer 1

错误说，您需要box_sizing的参数。

请尝试@include box-sizing(border-box);。

Answer 2

我犯了同样的错误。再次检查Listing 7.2，在＆＃34; / *其他* /＆＃34;之前有一些额外的代码;部分，您声明box_sizing是什么：

@mixin box_sizing {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

Answer 3

确保你在引导程序＆amp;之后声明mixin bootstrap-sprockets导入（即确保你没有在 @import“bootstrap”之前声明box_sizing ）。 Bootstrap sass有一个内置的box_sizing mixin，否则将优先于你的。

这在railsguide中并没有真正涵盖（没有指示@import bootstrap会引入冲突的混音），所以这绝对是一个容易犯的错误。

我遇到了同样的错误信息问题，现有的解决方案都不适用于我。在我的例子中，我为mixins和变量创建了一个scss文件，并在bootstrap和bootstrap-sprockets之前导入它。将它移到它们下方修复了问题。因此，在您的情况下，请确保您的一般订单是：

@import "bootstrap-sprockets" @import "bootstrap"; /* either @import your-file-containing-box-sizing-mixin; or: */ @mixin box_sizing { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .debug_dump { clear: both; float: left; width: 100%; margin-top: 45px; @include box_sizing; }

Answer 4

我遇到了同样的问题，在完成清单7.2中的custom.scss后，我通过在Sass mixin css代码的基础上添加了清单7.11的css侧边栏代码和清单7.15的表单css代码来更新了custom.scss。代码清单7.2所以它看起来像这样。

/* forms */

input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  margin-bottom: 15px;
  @include box_sizing;
}

input {
  height: auto !important;
}
/* sidebar */

aside {
  section.user_info {
    margin-top: 20px;
  }
  section {
    padding: 10px 0;
    margin-top: 20px;
    &:first-child {
      border: 0;
      padding-top: 0;
    }
    span {
      display: block;
      margin-bottom: 3px;
      line-height: 1;
    }
    h1 {
      font-size: 1.4em;
      text-align: left;
      letter-spacing: -1px;
      margin-bottom: 3px;
      margin-top: 0px;
    }
  }
}

.gravatar {
  float: left;
  margin-right: 10px;
}

.gravatar_edit {
  margin-top: 15px;
}
/* mixins, variables, etc. */


@mixin box_sizing {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/* miscellaneous */

.debug_dump {
  clear: both;
  float: left;
  width: 100%;
  margin-top: 45px;
  @include box-sizing(border-box);
}

要修复它我将清单7.2中的Sass mixin css代码带回到@@import“bootstrap-sprockets”下面的顶部; @import“bootstrap”;但要高于清单7.11和清单7.15的css代码。这解决了我的问题，当我完成时，这里是custom.scss的顶部。

@import "bootstrap-sprockets";
@import "bootstrap";


/* mixins, variables, etc. */
@mixin box_sizing {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/* miscellaneous */

.debug_dump {
  clear: both;
  float: left;
  width: 100%;
  margin-top: 45px;
  @include box-sizing(border-box);
}
/* forms */

input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;

无法弄清楚为什么我的SASS不会工作

4 个答案: