Cacher is the code snippet organizer for pro developers

p {
  font-size: 20px;
  font-size: 1.25rem;
}
@media (min-width: 960px) {
  p {
    font-size: 1.75rem;
  }
}

span {
  font-size: 18px;
  font-size: 1.125rem;
}

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// Bourbon (v4.0.2)
// ----

@import "bourbon/bourbon";

$in_mq: no !global;
$breakpoints: (large: 960px);
@mixin bp($name) {
	@if not index(map-keys($breakpoints), $name) {
		@warn "Invalid breakpoint `#{$name}`.";
	}
	@else {
	  $in_mq: yes !global;
		@media (min-width: map-get($breakpoints, $name)) {
			@content;
		}
		$in_mq: no !global;
	}
}

@mixin px-rem($property, $values...) {
	$pxValues: ();
	$remValues: ();

	@each $value in $values {
		$val: strip-units($value);
		@if not not index("initial" "inherit" "auto" 0, $value) {
			$pxValues: append($pxValues, $val);
			$remValues: append($remValues, $val);
		} @else {
			$pxValues: append($pxValues, $val*1px);
			$remValues: append($remValues, rem($val) );
		}
	}
  @if ( $in_mq == no ) {
	  #{$property}: $pxValues;
  }
	#{$property}: $remValues;
}
p {
  @include px-rem(font-size, 20);
  @include bp(large) {
    @include px-rem(font-size, 28);
  }
}
span {
  @include px-rem(font-size, 18);
}