Changing navigation using Susy

Question

How can I change the layout of different elements of a page using Susy, for instance, change the top navigation of a page from a bar when on desktop, but a button with a dropdown when on mobile?

Answer 1

Use the at-breakpoint mixin (see the docs):

// mobile styles here

@include at-breakpoint($min-screen-width $large-columns) {
  // screen styles here
}

You can also see at-breakpoint in several demos on the Susy site.