Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

@function grid-calc($colNumber, $totalColumns) {
  @return percentage(($colNumber / $totalColumns));
}

.stream-image-right {
	float: right;
	margin-left: 1em;
	width: grid-calc(3, 12);
}



// Media Query Ranges row-width is 94em
$small-range: (0em, 43em);
$medium-range: (43.063em, 60em);
$large-range: (60.063em, 77em);
$xlarge-range: (77.063em, 94em);
$xxlarge-range: (94.063em);

//
// @functions
//

@function lower-bound($range){
  @if length($range) <= 0 {
    @return 0;
  }
  @return nth($range,1);
}

@function upper-bound($range) {
  @if length($range) < 2 {
    @return 999999999999;
  }
  @return nth($range, 2);
}

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

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

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

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

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

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


%font-size-2x-larger {
	font-size: rem-calc(22);
	@media #{$medium-up} {
		font-size: rem-calc(25);
	}
	@media #{$large-up} {
		font-size: rem-calc(26);
	}
}

%font-size-1x-larger {
	font-size: rem-calc(21);
}

%font-size-larger {
	font-size: rem-calc(18);
}


.full-width-image {
	background-size: cover;
	background-position: 50% 50%;
	height: 10em;
	@media #{$medium-up} {
		height: 20em;
	}
	@media #{$large-up} {
		height: 30em;
	}
	@media #{$xlarge-up} {
		height: 40em;
	}
}

SassMeister-output.css

.stream-image-right {
  float: right;
  margin-left: 1em;
  width: 25%;
}

.full-width-image {
  background-size: cover;
  background-position: 50% 50%;
  height: 10em;
}
@media only screen and (min-width: 43.063em) {
  .full-width-image {
    height: 20em;
  }
}
@media only screen and (min-width: 60.063em) {
  .full-width-image {
    height: 30em;
  }
}
@media only screen and (min-width: 77.063em) {
  .full-width-image {
    height: 40em;
  }
}