Scss breakpoints mixins

gistfile1.scss

// Default max limits widths
$container-max-widths: (
        sm: 540px,
        md: 720px,
        lg: 960px,
        xl: 1280px
) !default;


/* Breakpoints */
@mixin breakpoint($point) {

  @if $point == dad {
    @media (max-width: map-get($container-max-widths, 'xl')) { @content; }
  }

  @else if $point == mom {
    @media (max-width: map-get($container-max-widths, 'lg')) { @content; }
  }

  @else if $point == baby {
    @media (max-width: map-get($container-max-widths, 'md'))  { @content; }
  }

  @else if $point == minibaby {
    @media (max-width: map-get($container-max-widths, 'sm'))  { @content; }
  }
}


@mixin reverse-breakpoint($point) {

  @if $point == dad {
    @media (min-width: map-get($container-max-widths, 'xl')) { @content; }
  }

  @else if $point == mom {
    @media (min-width: map-get($container-max-widths, 'lg')) { @content; }
  }

  @else if $point == baby {
    @media (min-width: map-get($container-max-widths, 'md'))  { @content; }
  }

  @else if $point == minibaby {
    @media (min-width: map-get($container-max-widths, 'sm'))  { @content; }
  }
}

// Alias
@mixin bp($args...) {
    @include breakpoint($args...){
        @content;
    }
}

@mixin rbp($args...) {
    @include breakpoint($args...){
        @content;
    }
}

// Usage
/*
    @include rbp(dad){
        body {
            background-color: blue !important;
        }
    }
*/