Susy at-breakpoint max-width media query

Question

I'm trying to create a media query that has max-width: 600px using the @include at-breakpoint mixin.

.selector {
  @include at-breakpoint(4, 600px){
    // ...
  }
}

Will output the following media query:

@media (min-width: 300px) {
  // ...
}

I was under the impression that the at-breakpoint mixin accepts 3 arguments, being: min-width, lay-out and max-width.

But when using this:

.selector {
  @include at-breakpoint(1px, 4, 600px){
    // ...
  }
}

I get the following compile error:

Mixin at-breakpoint takes 2 arguments but 3 were passed

But I'm not getting any errors when I use this, even though $tablet-layout is passing 3 arguments.

.selector {
  @include at-breakpoint($tablet-layout){
    // ...
  }    
}


$tablet-width:              600px;
$tablet-columns:             12;
$tablet-sidebar-columns:     4;

$desktop-width:              780px;
$desktop-columns:            12;
$desktop-sidebar-columns:   4;

$tablet-layout:       $tablet-width $tablet-columns $desktop-width;
$desktop-layout:      $desktop-width $desktop-columns $tablet-width;

So my question is: what is the correct way to get a max-width: 600px media query in Susy?

Answer 1

You have the right idea, but you need to do it without the commas:

@include at-breakpoint(4 600px); // max-width: 600px;
@include at-breakpoint(1px 4 600px) // min-width: 1px; max-width: 4px;

That's why your other combined variables work - they all get passed as a single list argument.