At-breakpoint fallback causes error

Question

I found the topic susy, media queries, and lt IE9 where it's stated you can add the "fallback class" to the variable as to have it applied at all the specified at-breakpoints that use the variable.

So I changed my variable:

    $desk: 58em 12;

to

    $desk: 58em 12 lt-ie9;

But this causes an error like this:

    Syntax error: Base-level rules cannot contain the parent-se1ector-referencing character ' & ' .
    on line 91 of C: /Ruby200/lib/ruby/gems/2.0.0/gems/susy-1.0.9/sass/susy/_media.scss,         in ‘ Gcontent '
    from line 15 of C: /Ruby200/lib/ruby/gems/2.0.0/gems/susy-1.0.9/sass/susy/_media.scss, in ‘ layout '
    from line 54 of C: /Ruby200/lib/ruby/gems/2.0.0/gems/susy-1.0.9/sass/susy/_media.scss, in ‘ at-breakpoint '
    from line 87 of C: /localpath/sass/layouts/project/site.layout.scss

The last line is the first line where the media-layout varible "$desk" is called for the first time.

    @include at-breakpoint($desk) {
    .l-header,
    .l-main,
    .l-footer,
    .l-region--navigation {
      @include set-container-width; // Reset only the container width (elements have already been declared as containers).
    }

Am I missing some obvious syntax error?

Answer 1

That's a Sass issue, and should be fixed in Sass 3.3 (currently in alpha). In order to set a fallback class, Susy has to use the Sass parent selector (&) — but that selector fails when there is no parent. We've been tracking the issue on GitHub, and you can find a few work-arounds in that thread. Basically, if you use the fallback class (before Sass 3.3), you have to nest at-breakpoint inside another selector. In most cases (including yours) that's a simple as moving the mixin inside your existing selectors:

.l-header,
.l-main,
.l-footer,
.l-region--navigation {
  @include at-breakpoint($desk) {
    @include set-container-width;
  }
}