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

Question

Gulp-sass is crashing because of an error - because it was crashing at first I didn't even get an error, then I ran the sass through the ruby compiler instead I got the following.

error neat/grid/_media.scss (Line 34: Illegal nesting: Only properties maybe nested beneath properties)

I can't see anything wrong with _media.scss therefore I don't know what the error message is referring to.

I have seen answers on Stackoverflow for the meaning of this error message from Sass code but I cannot see how this message could apply to Scss code because indentation is not an issue in Scss.

Here's a link to the neat/grid/_media.scss which is mentioned in the error message.

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

Heres the docs for the mixin. http://thoughtbot.github.io/neat-docs/latest/#media

Heres the actual code in the file that is mentioned in the error message:

@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;
    }
  }
}

Does anyone know what the error message means for SCSS (not Sass) ? It says there is an nesting (indentation) error in _media.scss but SCSS doesn't care about indentation!

There's not enough information here to reproduce the problem. Did you try searching for the error? — cimmanon, Dec 16 '15 at 13:42
yes I've tried debugging and searching- using @debug and outputting all the variables I can get it to run by removing some of the code - but I still have no idea what the error message means. — jojojohn, Dec 16 '15 at 13:46
There's nothing wrong with that mixin, you haven't provided enough information: http://sassmeister.com/gist/52cd587b351f13c35e81 — cimmanon, Dec 16 '15 at 13:52
can't compile our 60 sass files... what a night mare- thanks for the down vote by the way — jojojohn, Dec 16 '15 at 13:59
Thanks for the sassmeister link I didn't know about that. I'll run some more files through it. — jojojohn, Dec 16 '15 at 14:13
If you had bothered googling the error message, one of the first results would have been this question: http://stackoverflow.com/questions/20720471/sass-only-properties-may-be-nested-in-properties-why — cimmanon, Dec 16 '15 at 16:16
I did find that one but my error was pointing to a file that was not the problem. Thanks for your help - I've been googling all day today and yesterday. — jojojohn, Dec 16 '15 at 16:22
By the way @cimmanon I had mentioned in the question that I had found that answer already - but it was for sass and I was getting an error from an scss file — jojojohn, Dec 23 '15 at 14:53

jojojohn · Accepted Answer · 2015-12-23T15:54:59.497

The lessons I learned that I hope will save someone else a lot of time are:

When sass-gulp crashes it is more than likely a sass/scss error rather than a gulp error.I didn't know this because most syntax errors get piped to the console by error handling in the gulp file, however it turns out if your error is a little more serious it can still crash gulp.
When you get an error message from a scss or sass file the error might not actually be in that file. I ended up randomly disabling all files to eventually find the offending file because the error message gave the wrong file name.

I found this out after sass-gulp started working again when I commented out lines 10 and 37 in _media.scss which are the '@content ' directives even though there weren't actually any errors in these lines or even in the _media.scss file:

What is @content directive ?

These directives call my code from other sass files. It was my own files else where that were breaking the mixin and making gulp crash when they were called by @content

If you look in the .find-drawer class from the offending file you will see that all the media queries are nested inside the margin-bottom: -33px rule

.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

This must have generated a really crazy media queries because it was fed into a loop in _media.scss

I just shifted the media queries a couple of spaces to the left so that they are now nested inside .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

Phew! What a relief !

not sure why this was down voted. I spent 2 days trying to find out why sass-gulp crashed - the first half day was finding out how to even get the error message - its a perfectly good solution to a real problem. — jojojohn, Dec 23 '15 at 14:48

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

1 Answers1