Bourbon Neat 2.0 Breakpoints Material Design

_grid-settings.scss

// Material Design breakpoints w/ Neat 2.0 custom grids
// http://bourbon.io/
// http://neat.bourbon.io/
// https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints

$mobile-xsmall: (
  columns: 4,
  gutter: 16px,
  media: "(max-width: 319px)"
);

$mobile: (
  columns: 4,
  gutter: 16px,
  media: "(min-width: 0px)"
);

$mobile-med: (
  columns: 4,
  gutter: 16px,
  media: "(min-width: 361px)"
);

$mobile-large: (
  columns: 4,
  gutter: 16px,
  media: "(min-width: 401px)"
);

$mobile-large-xcol: (
  columns: 8,
  gutter: 16px,
  media: "(min-width: 481px)"
);

$mobile-small-landscape: (
  columns: 8,
  gutters: 16px,
  media: "(min-width: 481px) and (orientation: landscape)"
);

$mobile-med-landscape: (
  columns: 8,
  gutters: 16px,
  media: "(min-width: 601px) and (orientation: landscape)"
);

$mobile-large-landscape: (
  columns: 8,
  gutters: 16px,
  media: "(min-width: 721px) and (orientation: landscape)"
);

$mobile-large-landscape-xcol: (
  columns: 12,
  gutters: 16px,
  media: "(min-width: 841px) and (orientation: landscape)"
);

$tablet-small: (
  columns: 8,
  gutter: 16px,
  media: "(min-width: 601px)"
);

$tablet: (
  columns: 8,
  gutter: 24px,
  media: "(min-width: 601px)"
);

$tablet-large: (
  columns: 8,
  gutter: 24px,
  media: "(min-width: 721px)"
);

$tablet-small-landscape: (
  columns: 8,
  gutter: 24px,
  media: "(min-width: 961px) and (orientation: landscape)"
);

$tablet-small-landscape-xcol: (
  columns: 12,
  gutter: 24px,
  media: "(min-width: 961px) and (orientation: landscape)"
);

$tablet-large-landscape: (
  columns: 8,
  gutter: 24px,
  media: "(min-width: 1025px) and (orientation: landscape)"
);

$tablet-large-landscape-xcol: (
  columns: 12,
  gutter: 24px,
  media: "(min-width: 1025px) and (orientation: landscape)"
);

$desktop-xsmall: (
  columns: 4,
  gutter: 16px,
  media: "(min-width: 0px)"
);

$desktop-xsmall-xcol: (
  columns: 8,
  gutter: 16px,
  media: "(min-width: 481px)"
);

$desktop-small: (
  columns: 8,
  gutter: 24px,
  media: "(min-width: 601px)"
);

$desktop-small-xcol: (
  columns: 12,
  gutter: 24px,
  media: "(min-width: 841px)"
);

$desktop: (
  columns: 12,
  gutter: 24px,
  media: "(min-width: 841px)"
);

$desktop-medium: (
  columns: 12,
  gutter: 24px,
  media: "(min-width: 961px)"
);

$desktop-large: (
  columns: 12,
  gutter: 24px,
  media: "(min-width: 1281px)"
);

$desktop-xlarge: (
  columns: 12,
  gutter: 24px,
  media: "(min-width: 1921px)"
);

$four-columns: (
  columns: 4,
  gutter: 16px,
  media: "(min-width: 0px)"
);

$eight-columns: (
  columns: 8,
  gutter: 16px,
  media: "(min-width: 481px)"
);

$twelve-columns: (
  columns: 12,
  gutter: 24px,
  media: "(min-width: 841px)"
);

// Override default Neat 2.0 grid
$neat-grid: $mobile;

Example implementation:

// _layout.sass
.container
  +grid-media($mobile)
    height: 50px
    +grid-visual

  +grid-media($tablet)
    height: 100px
    +grid-visual

  +grid-media($desktop)
    height: 200px
    +grid-visual

  +grid-media($mobile-small-landscape)
    background-color: red
    +grid-visual

Note: _grid-settings.scss is best left as a .scss file. I had trouble with Sass maps in the .sass syntax.