Fluid Property

fluid-property.scss

@mixin fluid_property($properties, $sizes, $include-default: true) {

	$counter: 1;
	$has-default: false;

	$breakpoints-keys: map-keys($breakpoints);

	@each $current-size in $sizes {
		$continue: false;
		$next-size: n;

		@if (length($sizes) == $counter + 1) {
			$continue: true;
		}
		@if (length($sizes) != $counter) {
			$next-size: nth($sizes, $counter + 1);
		}

		$current-breakpoint: map-get($breakpoints, nth($breakpoints-keys, $counter));
		@if (1 == $counter) {
			$current-breakpoint: 375px;
		}

		@if (n != $current-size and n != $next-size) {

			$next-breakpoint: map_get($breakpoints, nth($breakpoints-keys, $counter + 1));

			@if (false == $has-default and true == $include-default) {
				@each $property in $properties {
					#{$property}: scut-em($current-size);
				}
				$has-default: true;
			}
			@include between_with_media_queries($properties, $current-size * 1px, $next-size * 1px, $current-breakpoint, $next-breakpoint, $continue);
		}
		$counter: $counter + 1;
	}
}

Usage is like this:

// Will transition a property from one breakpoint to another, as defined in your breakpoints setting.
// Will start at font-size: 30px at 375px, and 65px at the medium breakpoint.
@include fluid_property((font-size), (30, 65));

// Will start at max-width: 350px at the large breakpoint, and end up as max-width: 480px at xlarge.
// "False" means it won't include the default setting (line 28-33).
@include fluid_property(max-width, (n, n, 350, 480), false);