Sass mixin for responsive Material Design breakpoints with grid

breakpoints-map.scss

// Base size for margins
$base-size: 16px;

// Breakpoints map https://material.io/design/layout/responsive-layout-grid.html#breakpoints
$grid-breakpoints-map: (
  xs-small: (
    width: 360px,
    column: 4,
    margin: $base-size
    ),
  xs-medium: (
    width: 400px,
    column: 4,
    margin: $base-size
    ),
  xs-large: (
    width: 480px,
    column: 4,
    margin: $base-size
    ),
  sm-xsmall: (
    width: 600px,
    column: 8,
    margin: $base-size
  ),
  sm-small: (
    width: 720px,
    column: 8,
    margin: $base-size * 1.5
    ),
  sm-medium: (
    width: 840px,
    column: 12,
    margin: $base-size * 1.5
    ),
   sm-large: (
    width: 960px,
    column: 12,
    margin: $base-size * 1.5
    ),
  md-small: (
    width: 1024px,
    column: 12,
    margin: $base-size * 1.5
    ),
  md-large: (
    width: 1280px,
    column: 12,
    margin: $base-size * 1.5
  ),
  lg-small: (
    width: 1440px,
    column: 12,
    margin: $base-size * 1.5
  ),
  lg-large: (
    width: 1600px,
    column: 12,
    margin: $base-size * 1.5
  ),
  lg-large: (
    width: 1920px,
    column: 12,
    margin: $base-size * 1.5
  )
);

mixins.scss

@mixin viewport($size, $width: width) {
  @if not(index(map-keys($grid-breakpoints-map), $size)) {
    @warn "Warning: `#{$size}` is not a valid breakpoint.";
  }@else {
    @media (min-width: #{map-get(map-get($grid-breakpoints-map, $size), $width)}) {
      @content;
    }
  }
}

@mixin layout--grid ($size, $column: column, $margin: margin) {
  @if not(index(map-keys($grid-breakpoints-map), $size)) {
    @warn "Warning: `#{$size}` is not a valid breakpoint.";
  }@else {
    column-gap: #{map-get(map-get($grid-breakpoints-map, $size), $margin)};
    grid-template-columns: repeat(#{map-get(map-get($grid-breakpoints-map, $size), $column)}, minmax(0, 1fr));
  }
}