Move unit conversions in to own partial

stylesheets/_rem.scss

@@ -1,21 +1,7 @@
-// Base font size in pixels, if not already defined.
-// Should be the same as the font-size of the html element.
-$base-font-size: 16px !default;
-$rem-with-px-fallback: true !default;
-
-// @private Number of pixels in 1rem.
-// For px -> rem, divide by this ratio; for the other way, multiply.
-$px-per-rem: $base-font-size / 1rem;
 
-// Return pixel values as rem
-@function px-to-rem($px-value) {
-	@return $px-value / $px-per-rem;
-}
+@import "units";
 
-// Return rem values as px
-@function rem-to-px($rem-value) {
-	@return $rem-value * $px-per-rem;
-}
+$rem-with-px-fallback: true !default;
 
 // For the given property, use rem units with px as a fallback value for older
 // browsers.
@@ -38,13 +24,13 @@ $px-per-rem: $base-font-size / 1rem;
 	@each $value in $values {
 		// For each property value, if it's in rem or px, derive both rem and
 		// px values for it and add those to the end of the appropriate buffer.
-		@if (type-of($value) == number and not unitless($value) and (unit($value) == px or unit($value) == rem)) {
+		@if type-of($value) == number and not unitless($value) and (unit($value) == px or unit($value) == rem) {
 			@if unit($value) == px {
 				$px-values: join($px-values, $value);
-				$rem-values: join($rem-values, px-to-rem($value));
+				$rem-values: join($rem-values, convert-font-unit($value, rem));
 			}
 			@else {
-				$px-values: join($px-values, rem-to-px($value));
+				$px-values: join($px-values, convert-font-unit($value, px));
 				$rem-values: join($rem-values, $value);
 			}
 		}

stylesheets/_units.scss

@@ -0,0 +1,86 @@
+
+// Base font size in pixels, if not already defined.
+// Should be the same as the font-size of the html element.
+$base-font-size: 16px !default;
+
+@function convert-unit($value, $to-unit, $context) {
+
+	// Return any unitless value as-is.
+	@if unitless($value) {
+		@return $value;
+	}
+
+	// Prep the units to convert from and to.
+	$from-unit: unit($value);
+	$to-unit: quote($to-unit);
+
+	// @debug "Output unit is #{$to-unit}";
+
+	// Relative length units
+	// http://dev.w3.org/csswg/css3-values/#relative-lengths
+	$px-per-rem: $base-font-size / 1rem;
+	$px-per-em: $context / 1em;
+	$px-per-ex: ($context / 2) / 1ex;
+	$px-per-cent: $context / 100%;
+
+	// Absolute length units
+	// http://dev.w3.org/csswg/css3-values/#absolute-lengths
+	$px-per-inch: 96px / 1in;
+	$px-per-mm: 96px / 25.4mm;
+	$px-per-cm: 96px / 2.54cm;
+	$px-per-pt: 4px / 3pt;
+	$px-per-pc: 16px / 1pc;
+
+	// Create a variable to store intermediate values.
+	$value-px: '';
+
+	// @debug "Attempting to convert #{$value} from #{$from-unit} to intermediate value.";
+
+	// Convert the supplied font size to pixels.
+	@if $from-unit == 'px' { $value-px: $value; }
+	@else if $from-unit == 'rem' { $value-px: $value * $px-per-rem; }
+	@else if $from-unit == 'em'  { $value-px: $value * $px-per-em; }
+	@else if $from-unit == 'ex'  { $value-px: $value * $px-per-ex; }
+	@else if $from-unit == '%'   { $value-px: $value * $px-per-cent; }
+	@else if $from-unit == 'in'  { $value-px: $value * $px-per-in; }
+	@else if $from-unit == 'mm'  { $value-px: $value * $px-per-mm; }
+	@else if $from-unit == 'cm'  { $value-px: $value * $px-per-cm; }
+	@else if $from-unit == 'pt'  { $value-px: $value * $px-per-pt; }
+	@else if $from-unit == 'pc'  { $value-px: $value * $px-per-pc; }
+	@else if $from-unit == 'ch' {
+		@warn "#{$from-unit} units can't be reliably converted; Returning original value.";
+		@return $value;
+	}
+	@else {
+		@warn "#{$from-unit} is an unknown font-sizing unit. Returning original value.";
+		@return $value;
+	}
+
+	// @debug "Successfully converted #{$value} to intermediate value of #{$value-px}.";
+
+	// @debug "Attempting to convert #{$value-px} to final value in #{$to-unit}.";
+
+	// Return the length value in the desired unit.
+	@if $to-unit == 'px' { @return $value-px; }
+	@else if $to-unit == 'rem' { @return $value-px / $px-per-rem; }
+	@else if $to-unit == 'em'  { @return $value-px / $px-per-em; }
+	@else if $to-unit == 'ex'  { @return $value-px / $px-per-ex; }
+	@else if $to-unit == '%'   { @return $value-px / $px-per-cent; }
+	@else if $to-unit == 'in'  { @return $value-px / $px-per-in; }
+	@else if $to-unit == 'mm'  { @return $value-px / $px-per-mm; }
+	@else if $to-unit == 'cm'  { @return $value-px / $px-per-cm; }
+	@else if $to-unit == 'pt'  { @return $value-px / $px-per-pt; }
+	@else if $to-unit == 'pc'  { @return $value-px / $px-per-pc; }
+	@else if $to-unit == 'ch' {
+		@warn "#{$to-unit} units can't be reliably converted. Returning original value.";
+		@return $value;
+	}
+	@else {
+		@warn "#{$to-unit} is an unknown font-sizing unit. Returning original value.";
+		@return $value;
+	}
+}
+
+@function convert-font-unit($font-value, $to-unit, $context-font-size: $base-font-size) {
+	@return convert-unit($font-value, $to-unit, $context-font-size);
+}

test/css/test-units.css

@@ -0,0 +1,8 @@
+/* Test  */
+.rem {
+  font-size: 10px;
+  margin-top: 0.75rem;
+  margin-right: 1.25rem;
+  margin-bottom: 0.313rem;
+  margin-left: 12px;
+}

test/sass/test-units.sass

@@ -0,0 +1,10 @@
+@import "../../stylesheets/units"
+
+/* Test  */
+.rem
+	font-size: 10px
+	margin-top: convert-length(12px, rem)
+	margin-right: convert-length(2em, rem, 10px)
+	margin-bottom: convert-length(50%, rem, 10px)
+	margin-left: convert-length(12px, px)
+