From 129e1bb10f94a7186352112f911200fe6706235b Mon Sep 17 00:00:00 2001
From: Pierre Burel <pierre@lunaweb.fr>
Date: Fri, 30 Jan 2015 09:46:38 +0100
Subject: [PATCH] Added rem to px conversion

---
 README.md  | 10 +++++-----
 _rem.scss  | 31 +++++++++++++++++++------------
 bower.json |  2 +-
 3 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index 207244c..2eed8ad 100644
--- a/README.md
+++ b/README.md
@@ -35,7 +35,7 @@ Import `_rem.scss`, set the html font-size to 62.5% (depending of `$rem-baseline
       text-shadow: rem(1px 1px #eee, -1px -1px #eee); // Function and multiple values, warning: no fallback possible with rem function
       // Map support (Sass 3.3+)
       @include rem((
-        margin: 20px 0,
+        margin: 20px 1rem,
         padding: 10px
       ));
     }
@@ -54,8 +54,8 @@ That will output :
       box-shadow: 0 0 2px #ccc, inset 0 0 5px #eee;
       box-shadow: 0 0 0.2rem #ccc, inset 0 0 0.5rem #eee;
       text-shadow: 0.1rem 0.1rem #eee, -0.1rem -0.1rem #eee; // No fallback
-      margin: 20px 0;
-      margin: 2rem 0;
+      margin: 20px 10px;
+      margin: 2rem 1rem;
       padding: 10px;
       padding: 1rem;
     }
@@ -67,7 +67,7 @@ You can disable pixel fallback by setting `$rem-fallback` to `false` :
       border-bottom: 0.1rem solid black;
       box-shadow: 0 0 0.2rem #ccc, inset 0 0 0.5rem #eee;
       text-shadow: 0.1rem 0.1rem #eee, -0.1rem -0.1rem #eee;
-      margin: 2rem 0;
+      margin: 2rem 1rem;
       padding: 1rem;
     }
 
@@ -78,6 +78,6 @@ You can totally disable rem units by setting `$rem-px-only` to `true` (lt-ie9 on
       border-bottom: 1px solid black;
       box-shadow: 0 0 2px #ccc, inset 0 0 5px #eee;
       text-shadow: 1px 1px #eee, -1px -1px #eee; // Fallback works here
-      margin: 20px 0;
+      margin: 20px 10px;
       padding: 10px;
     }
diff --git a/_rem.scss b/_rem.scss
index 36680f3..88aab09 100644
--- a/_rem.scss
+++ b/_rem.scss
@@ -16,22 +16,29 @@ $rem-px-only: false !default;
   @return if($test-list == $list, space, comma);
 }
 
-@function rem($values...) {
-  @if $rem-px-only {
-    @return $values;
-  }
-  $rem: ();
+@function rem-convert($to, $values...) {
+  $result: ();
   $separator: rem-separator($values);
   @each $value in $values {
-    @if type-of($value) == "number" and unit($value) == "px" {
-      $rem: append($rem, $value / ($rem-baseline / 1rem), $separator);
+    @if type-of($value) == "number" and unit($value) == "rem" and $to == "px" {
+      $result: append($result, $value / 1rem * $rem-baseline, $separator);
+    } @else if type-of($value) == "number" and unit($value) == "px" and $to == "rem" {
+      $result: append($result, $value / ($rem-baseline / 1rem), $separator);
     } @else if type-of($value) == "list" {
-      $rem: append($rem, rem($value...), $separator);
+      $result: append($result, rem-convert($to, $value...), $separator);
     } @else {
-      $rem: append($rem, $value, $separator);
+      $result: append($result, $value, $separator);
     }
   }
-  @return $rem;
+  @return $result;
+}
+
+@function rem($values...) {
+  @if $rem-px-only {
+    @return rem-convert(px, $values...);
+  } @else {
+    @return rem-convert(rem, $values...);
+  }
 }
 
 @mixin rem($properties, $values...) {
@@ -42,10 +49,10 @@ $rem-px-only: false !default;
   } @else {
     @each $property in $properties {
       @if $rem-fallback or $rem-px-only {
-        #{$property}: $values;
+        #{$property}: rem-convert(px, $values...);
       }
       @if not $rem-px-only {
-        #{$property}: rem($values...);
+        #{$property}: rem-convert(rem, $values...);
       }
     }
   }
diff --git a/bower.json b/bower.json
index 589136e..4dadb9d 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "sass-rem",
   "description": "Sass mixin and function to use rem units with pixel fallback.",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "homepage": "https://github.com/pierreburel/sass-rem",
   "main": "_rem.scss",
   "authors": [