Sass gulp crashes - SCSS Error : Illegal nesting: Only properties maybe nested beneath properties

Sass gulp crashes - SCSS Error : Illegal nesting: Only properties maybe nested beneath properties

Gulp-sass 由于错误而崩溃 - 因为一开始它崩溃了我什至没有收到错误，然后我 运行 sass 通过 ruby 编译器，我得到了以下内容。

error neat/grid/_media.scss（第 34 行：非法嵌套：只有属性可以嵌套在属性下面）

我看不出 _media.scss 有什么问题，因此我不知道错误消息指的是什么。

我在 Whosebug 上看到了有关 Sass 代码中此错误消息的含义的答案，但我看不出此消息如何应用于 Scss 代码，因为缩进在 Scss 中不是问题。

这是错误消息中提到的 neat/grid/_media.scss 的 link。

https://github.com/thoughtbot/neat/blob/master/app/assets/stylesheets/grid/_media.scss

这是 mixin 的文档。 http://thoughtbot.github.io/neat-docs/latest/#media

这是错误消息中提到的文件中的实际代码：

@mixin media($query: $feature $value $columns, $total-columns: $grid-     columns) {
  @if length($query) == 1 {
    @media screen and ($default-feature: nth($query, 1)) {
      $default-grid-columns: $grid-columns;
      $grid-columns: $total-columns !global;
      @content;
      $grid-columns: $default-grid-columns !global;
    }
  } @else {
    $loop-to: length($query);
    $media-query: "screen and ";
    $default-grid-columns: $grid-columns;
    $grid-columns: $total-columns !global;

    @if is-not(is-even(length($query))) {
      $grid-columns: nth($query, $loop-to) !global;
      $loop-to: $loop-to - 1;
    }

    $i: 1;
    @while $i <= $loop-to {
      $media-query: $media-query + "(" + nth($query, $i) + ": " +      nth($query, $i + 1) + ") ";

      @if ($i + 1) != $loop-to {
        $media-query: $media-query + "and ";
      }

      $i: $i + 2;
    }

    @media #{$media-query} {
      @content;
      $grid-columns: $default-grid-columns !global;
    }
  }
}

有谁知道错误消息对 SCSS 意味着什么（不是 Sass）？它说 _media.scss 中存在嵌套（缩进）错误，但 SCSS 不关心缩进！

我希望能为别人节省很多时间的教训是：

  1. 当 sass-gulp 崩溃时，很可能是 sass/scss 错误而不是 gulp 错误 。我不知道这一点，因为大多数语法错误都会通过 gulp 文件中的错误处理传送到控制台，但事实证明，如果你的错误稍微严重一点，它仍然会崩溃 gulp。
  2. 当您从 scss 或 sass 文件中收到错误消息时，错误实际上可能不在该文件中。 我最终随机禁用了所有文件以最终找到有问题的文件，因为错误消息给出了错误的文件名。

我在 sass-gulp 再次开始工作后发现了这一点，当时我在 _media.scss 中注释掉了第 10 行和第 37 行，它们是 '@content ' 指令，即使没有这些行甚至 _media.scss 文件中实际上没有任何错误：

什么是@content 指令？

这些指令从其他 sass 文件调用我的代码。这是我自己的其他文件，当它们被@content

调用时，它们破坏了 mixin 并使 gulp 崩溃

如果您查看有问题的文件中的 .find-drawer class，您会发现所有媒体查询都嵌套在 margin-bottom: -33px 规则中

.find-drawer
  margin-bottom: -33px
    @include media(max-width $tablet-size)
      margin-bottom: 0
    @include media(max-width $small-screen)
      margin-bottom: 0
    @include media(max-width $mobile-screen)
      margin-bottom: 0

这一定产生了一个非常疯狂的媒体查询，因为它在 _media.scss

中被送入循环

我只是将媒体查询向左移动了几个空格，以便它们现在嵌套在 .find-drawer class

中 
.find-drawer
  margin-bottom: -33px
  @include media(max-width $tablet-size)
    margin-bottom: 0
  @include media(max-width $small-screen)
    margin-bottom: 0
  @include media(max-width $mobile-screen)
    margin-bottom: 0

呸！真松了一口气！