Example of Breakpoint Context API making life simpler. Use-case: Singularity.gs — https://github.com/Team-Sass/breakpoint/wiki/Breakpoint-Context

stuff.scss

// Define a breakpoint. outputs a media query:
//
// @include breakpoint($wide) {
//   stuff
// }
//
// ... becomes ...
//
// @media (min-width: 502px) {
//   stuff
// }

$wide: 502px;

// Set up Singularity. These grids will be able to query Breakpoint to see how they
// should render within various media query statements.

@include add-grid(1 10 1);
@include add-gutter(1/3);

@include add-grid(3 10 at $wide);  // by re-using bkpt var, we can know that breakpoint($wide) = this grid
@include add-gutter(1/4 at $wide); // new grid gutters kick in when breakpoint switches over.

// Use default grid
//
// On mobile create linear layout. Use the "10" column and leave the two "1" cols empty
main,
.sidebar {
  @include grid-span(1,2);  // span 1-col starting at 2nd col (1 ->10<- 1)
}

// Use second grid simply by wrapping grid-span()s in breakpoint().
//
// New grid looks something like this:
//
//  | s |           |
//  | i |     m     |
//  | d |     a     |
//  | e |     i     |
//  | b |     n     |
//  | a |           |
//  | r |           |
//
@include breakpoint($wide) {
  main {
    @include grid-span(1,2); // Fill 1-col of the grid starting at 2nd col (3 ->10<-)
  }

  .sidebar {
    @include grid-span(1,1); // Fill the 1st col of the grid (->3<- 10)
  }
}