What is the difference between @include breakpoint and @include at-breakpoint?

Question

I have a question because I am working on a project where my team is using @include breakpoint and @include at-breakpoint. We are using sass, compass, and susy. What is the difference between the two?

Answer 1

at-breakpoint is part of Susy, and is used for changing your total column-count at different breakpoints. Inspired by that initial syntax, Mason Wendell created a more powerful and generic Breakpoint Plugin for managing all your media-queries. Now, many people (including me) use both in the same project. They work great together, but the differences can be confusing.

• Use at-breakpoint when you want to change your susy $total-columns setting based on a min/max width media-query.
• Use breakpoint for more complex media-queries, or anywhere you don't want to change the number of columns.

If you want to use only one of them, and be more consistent, you can recreate the functionality of at-breakpoint using the longhand:

@include breakpoint($media-query) { // set your media-query
  @include layout($columns) { // set your columns
    // nested code will use the new column count at the given media-query
  }
}

at-breakpoint is simply a shortcut for that.