Generated by SassMeister.com.

breakpoint-mixin.scss

// ----
// libsass (v3.2.5)
// ----

/* Foundation 5.x breakpoints (from components/_global.scss) */
$small-breakpoint:  em-calc(640)  !default;
$medium-breakpoint: em-calc(1024) !default;
$large-breakpoint:  em-calc(1440) !default;
$xlarge-breakpoint: em-calc(1920) !default;

$small-range:   (0, $small-breakpoint) !default;
$medium-range:  ($small-breakpoint  + em-calc(1), $medium-breakpoint) !default;
$large-range:   ($medium-breakpoint + em-calc(1), $large-breakpoint)  !default;
$xlarge-range:  ($large-breakpoint  + em-calc(1), $xlarge-breakpoint) !default;
$xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999)) !default;

$screen: "only screen" !default;

$landscape: "#{$screen} and (orientation: landscape)" !default;
$portrait: "#{$screen} and (orientation: portrait)" !default;

$small-up: $screen !default;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})" !default;

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;

/* Create series of @media queries for Foundation breakpoints 
*  	Arguments...
*	  $property: any valid CSS property.
*	  $value-map: a SASS map using the same keys as
*		  the $breakpoint-map in the mixin, and values
*		  that will be assigned to $property.
*	NOTE: $value-map need not contain all breakpoints.
*/
@mixin map-to-breakpoints($property, $value-map) {
	$breakpoint-map: (
		small: $small-up,
		medium: $medium-up,
		large: $large-up,
		xlarge: $xlarge-up,
		xxlarge: $xxlarge-up
	);
	@each $key, $value in $breakpoint-map {
		@media #{$value} {
		  @if map_has_key($value-map, $key) {
			  #{$property}: map-get($value-map, $key);
		  }
		}
	}
}

.test {
  $test-map: (
    small: red,
    medium: orange,
    large: yellow,
    xlarge: green,
    xxlarge: blue
  );
  
  @include map-to-breakpoints(border-color, $test-map);
  border: 1px solid violet;
}

output.css

.test {
  border: 1px solid violet;
}

@media only screen {
  .test {
    border-color: red;
  }
}

@media only screen and (min-width: lower-bound(em-calc(640) em-calc(1), em-calc(1024))) {
  .test {
    border-color: orange;
  }
}

@media only screen and (min-width: lower-bound(em-calc(1024) em-calc(1), em-calc(1440))) {
  .test {
    border-color: yellow;
  }
}

@media only screen and (min-width: lower-bound(em-calc(1440) em-calc(1), em-calc(1920))) {
  .test {
    border-color: green;
  }
}

@media only screen and (min-width: lower-bound(em-calc(1920) em-calc(1), em-calc(99999999))) {
  .test {
    border-color: blue;
  }
}