If rem-calc() is given a % base, multiply the base by 16px

diff --git a/scss/util/_unit.scss b/scss/util/_unit.scss
index 245b572f37e5ea26d4a36882826c3d6978f7b7aa..613d9c7e20933c8d5d625a0ba8dbd21acb0ef679 100644 (file)
--- a/scss/util/_unit.scss
+++ b/scss/util/_unit.scss
@@ -22,19 +22,22 @@ $global-font-size: 100% !default;
 /// Converts one or more pixel values into matching rem values.
 ///
 /// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.
-/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px.
+/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.
 ///
 /// @returns {List} A list of converted values.
 @function rem-calc($values, $base: null) {
   $rem-values: ();
   $count: length($values);
 
+  // If no base is defined, defer to the global font size
   @if $base == null {
     $base: $global-font-size;
   }
 
+  // If the base font size is a %, then multiply it by 16px
+  // This is because 100% font size = 16px in most all browsers
   @if unit($base) == '%' {
-    $base: 16px;
+    $base: ($base / 100%) * 16px;
   }
 
   @if $count == 1 {