Question

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

错误整齐/ grid / _media.scss（第34行：非法嵌套：只有属性可能嵌套在属性下）

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

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

以下是错误消息中提到的neat / grid / _media.scss的链接。

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并不关心缩进！

Answer 1

我所学到的课程，我希望能为其他人节省很多时间：

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

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

什么是@content指令？

这些指令从其他sass文件中调用我的代码。这是我自己的文件，当它们被@content调用时，它们正在打破混合并使gulp崩溃

如果从违规文件中查看.find-drawer类，您将看到所有媒体查询都嵌套在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类

.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

唷！真是一种解脱！

Sass gulp崩溃 - SCSS错误：非法嵌套：只有属性可能嵌套在属性

1 个答案: