raybrownco · August 9, 2011 16:48 · Aug 9, 2011 · Aug 9, 2011 · Aug 9, 2011 · Aug 9, 2011
diff --git a/rem.scss b/rem.scss
@@ -1,8 +1,8 @@
 /*
  * 'rem' is a Sass mixin that converts pixel values to rem values for whatever property is passed to it.
  * It returns two lines of code — one of the regular pixel values (for IE), and another with the
- * converted rem values (for everyone else). Special thanks to Martin Bavio (http://martinbavio.com)
- * for the original code!
+ * converted rem values (for everyone else). Special thanks to Chris Epstein (http://chriseppstein.github.com)
+ * and Martin Bavio (http://martinbavio.com) for the help and code!
  * 
  * Sample input:
  * .element {

diff --git a/rem.scss b/rem.scss
@@ -1,8 +1,8 @@
 /*
  * 'rem' is a Sass mixin that converts pixel values to rem values for whatever property is passed to it.
  * It returns two lines of code — one of the regular pixel values (for IE), and another with the
- * converted rem values (for everyone else).
- *
+ * converted rem values (for everyone else). Special thanks to Martin Bavio (http://martinbavio.com)
+ * for the original code!
  * 
  * Sample input:
  * .element {

diff --git a/rem.scss b/rem.scss
@@ -23,17 +23,17 @@
 // then the variable below would be 10px.
 $baseline_px: 10px;
 
-@mixin rem($key, $values) {
+@mixin rem($property, $px_values) {
 
 	// Convert the baseline into rems
 	$baseline_rem: ($baseline_px / 1rem);
 
 	// Print the first line in pixel values
-	#{$key}: $values;
+	#{$property}: $px_values;
 
 	// If there is only one (numeric) value, return the property/value line for it.
-	@if type-of($values) == 'number' {
-		#{$key}: $values / $baseline_rem;
+	@if type-of($px_values) == 'number' {
+		#{$property}: $px_values / $baseline_rem;
 	}
 
 	// If there is more than one value, create a list and perform equations on each value
@@ -42,7 +42,7 @@ $baseline_px: 10px;
 		// Create an empty list that we can dump values into
 		$rem_values: ();
 
-		@each $value in $values {
+		@each $value in $px_values {
 
 			// If the value is zero, return 0
 			@if $value == 0 { 
@@ -57,7 +57,7 @@ $baseline_px: 10px;
 		}
 
 		// Return the property and its list of converted values
-		#{$key}: $rem_values;
+		#{$property}: $rem_values;
 
 	}
 

diff --git a/rem.scss b/rem.scss
@@ -40,24 +40,24 @@ $baseline_px: 10px;
 	@else {
 
 		// Create an empty list that we can dump values into
-		$remlist: ();
+		$rem_values: ();
 
 		@each $value in $values {
 
 			// If the value is zero, return 0
 			@if $value == 0 { 
-				$remlist: append($remlist, $value); 
+				$rem_values: append($rem_values, $value); 
 			}
 
 			// If the value is not zero, convert it from px to rem
 			@else {
-				$remlist: append($remlist, ($value / $baseline_rem) );
+				$rem_values: append($rem_values, ($value / $baseline_rem) );
 			}
 
 		}
 
 		// Return the property and its list of converted values
-		#{$key}: $remlist;
+		#{$key}: $rem_values;
 
 	}
 

diff --git a/rem.scss b/rem.scss
@@ -19,7 +19,8 @@
 
 // Baseline, measured in pixels
 // The value should be the same as the font-size value for the html element
-// If the html element's font-size is set to 62.5% (of the browser's default font-size of 16px), then the variable below would be 10px.
+// If the html element's font-size is set to 62.5% (of the browser's default font-size of 16px),
+// then the variable below would be 10px.
 $baseline_px: 10px;
 
 @mixin rem($key, $values) {

diff --git a/rem.scss b/rem.scss
@@ -1,4 +1,25 @@
-// This value should be the same as the font-size value for the html element
+/*
+ * 'rem' is a Sass mixin that converts pixel values to rem values for whatever property is passed to it.
+ * It returns two lines of code — one of the regular pixel values (for IE), and another with the
+ * converted rem values (for everyone else).
+ *
+ * 
+ * Sample input:
+ * .element {
+ *   @include rem('padding',10px 0 2px 5px);
+ * }
+ * 
+ * Sample output:
+ * .element {
+ *   padding: 10px 0 2px 5px;
+ *   padding: 1rem 0 0.2rem 0.5rem;
+ * }
+ * 
+ */
+
+// Baseline, measured in pixels
+// The value should be the same as the font-size value for the html element
+// If the html element's font-size is set to 62.5% (of the browser's default font-size of 16px), then the variable below would be 10px.
 $baseline_px: 10px;
 
 @mixin rem($key, $values) {
@@ -39,4 +60,4 @@ $baseline_px: 10px;
 
 	}
 
-}
+}
diff --git a/rem.scss b/rem.scss
@@ -0,0 +1,42 @@
+// This value should be the same as the font-size value for the html element
+$baseline_px: 10px;
+
+@mixin rem($key, $values) {
+
+	// Convert the baseline into rems
+	$baseline_rem: ($baseline_px / 1rem);
+
+	// Print the first line in pixel values
+	#{$key}: $values;
+
+	// If there is only one (numeric) value, return the property/value line for it.
+	@if type-of($values) == 'number' {
+		#{$key}: $values / $baseline_rem;
+	}
+
+	// If there is more than one value, create a list and perform equations on each value
+	@else {
+
+		// Create an empty list that we can dump values into
+		$remlist: ();
+
+		@each $value in $values {
+
+			// If the value is zero, return 0
+			@if $value == 0 { 
+				$remlist: append($remlist, $value); 
+			}
+
+			// If the value is not zero, convert it from px to rem
+			@else {
+				$remlist: append($remlist, ($value / $baseline_rem) );
+			}
+
+		}
+
+		// Return the property and its list of converted values
+		#{$key}: $remlist;
+
+	}
+
+}
No results found