logo标签列表

无法理解为什么我的SASS无法工作

cssruby-on-railssass
3

嗨，我正在尝试学习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页面。
4个回答
3
我犯了同样的错误。再次检查7.2节代码，在“/*杂项*/”部分之前，有一些额外的代码，您需要声明box_sizing是什么：
@mixin box_sizing {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
3
错误提示是，需要一个box_sizing的参数。
所以请尝试使用 @include box-sizing(border-box);。
2
请确保在引入bootstrap和bootstrap-sprockets之后声明mixin（即确保在@import“bootstrap”之后才声明box_sizing，否则Bootstrap sass中内置的box_sizing mixin会覆盖您的）。railsguide中没有涵盖这一点（没有指示@import bootstrap会引入冲突的mixin），因此这绝对是一个容易犯的错误。
我曾经遇到同样的问题和错误信息，但现有的解决方法都无法解决。在我的情况下，我创建了一个包含mixin和变量的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;
}
0

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

/* 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%;

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接