Sass

_breakpoints.scss

@import "utils"

// Glboal breakpoints

$breakpoints: (
  small: 412px,
  medium: 992px,
  large: 1200px
);

// This is an extenstion of http://www.sitepoint.com/using-sass-maps/
@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: #{map-get($breakpoints, $breakpoint)}) {
      @content;
    }
  }

  @else if $breakpoint == "default" {
    @content;
  }

  @else if is-px($breakpoint) {
    @media (min-width: #{$breakpoint}) {
      @content;
    }
  }
}

@mixin bp-options($configKey, $config, $transform: keep-same) {
  @each $configBreakpoint, $configValue in $config {
    @include respond-to($configBreakpoint) {
      #{$configKey}: call($transform, $configValue);
    }
  }
}

_utils.scss

// Given <X>px return true, otherwise return false

@function is-px($str) {
  $tStr: quote($str);
  @return str-index($tStr, px);
}

// Identity function

@function keep-same($val) {
  @return $val;
}

example1.css

.element {
  color: blue;
}

@media (min-width: 767px) {
  .element {
    color: yellow;
  }
}

@media (min-width: 1000px) {
  .element {
    color: white;
  }
}

example1.scss

.element {
  @include bp-options(color, (
    default: blue,
    small: yellow,
    1000px: white
  ));
}

example2.css

.page {
  min-height: calc(100vh - 45px);
}

@media (min-width: 767px) {
  .page {
    min-height: calc(100vh - 60px);
  } 
}

example2.scss

// Let's assume we have a nav with a set of breakpoint specific heights

$navHeights: (
  default: 45px,
  small: 60px
);

// We are interested in having another element's property be dependent on the nav height in the following way
@function page-min-height($navHeight) {
  @return calc(100vh - $navHeight);
}

.page {
  @include bp-options(min-height, $navHeights, page-min-height);
}

// In this way - if we change $navHeights, the .page min-height will automatically be adjusted as well