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

呸!真松了一口气!