无法弄清楚为什么我的 SASS 不起作用答案

【问题标题】：Cant figure out why my SASS wont work无法弄清楚为什么我的 SASS 不起作用
【发布时间】：2016-07-07 05:28:27
【问题描述】：

嘿，我正在尝试学习 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 的链接

【问题讨论】：

标签： css ruby-on-rails sass

【解决方案1】：

错误提示，您需要box_sizing 的参数。

所以试试@include box-sizing(border-box);。

【讨论】：

【解决方案2】：

我犯了同样的错误。再次检查Listing 7.2，在 "/* Miscellaneous */" 部分之前有一些额外的代码，您可以在其中声明 box_sizing 是什么：

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

【讨论】：

【解决方案3】：

确保您在 bootstrap 和 bootstrap-sprockets 导入之后声明了 mixin（即确保您没有在 before @import "bootstrap" 之前声明 box_sizing）。 Bootstrap sass 有一个内置的 box_sizing mixin，否则它会优先于你的。

railsguide 并没有真正涵盖这一点（没有迹象表明 @import bootstrap 引入了冲突的 mixin），所以这绝对是一个容易犯的错误。

我遇到了同样的错误消息，并且现有的解决方案都不适合我。就我而言，我为 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;
}

【讨论】：

【解决方案4】：

我遇到了同样的问题，在完成清单 7.2 中的 custom.scss 之后，我更新了 custom.scss，在 Sass mixin css 代码之上添加了清单 7.11 的 css 侧边栏代码和清单 7.15 的表单 css 代码清单 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 "引导程序";但要高于清单 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%;

【讨论】：