Trying out em support (not successfully)

hiulit · Oct 2, 2014 · 84652c7 · 84652c7
1 parent afaf674
commit 84652c7
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 80 deletions.
diff --git a/css/main.css b/css/main.css
diff --git a/scss/_config.scss b/scss/_config.scss
@@ -24,6 +24,6 @@ $defaultFontSize: 16;
 
 // Configurable variables.
 // Ok... You can change these variables! :D
-$baseFontSize: 18;
-$baseLineHeight: 1.2;
-$scaleFactor: $goldenSection;
+$baseFontSize: 16;
+$baseLineHeight: 1;
+$scaleFactor: $perfectFifth;
diff --git a/scss/_sassy-gridlover.scss b/scss/_sassy-gridlover.scss
@@ -1,56 +1,94 @@
 @import "config";
 
-// @function exponent() taken from Sassy-math https://github.com/Team-Sass/Sassy-math
+// @function exponent() taken from Sassy-math https://github.com/Team-Sass/Sassy-math.
 @function exponent($base, $exponent) {
 	// Reset value
 	$value: $base;
-	// Positive intergers get multiplied
+	// Positive intergers get multiplied.
 	@if $exponent > 1 {
 		@for $i from 2 through $exponent {
 			$value: $value * $base; } }
-	// Negative intergers get divided. A number divided by itself is 1
+	// Negative intergers get divided. A number divided by itself is 1.
 	@if $exponent < 1 {
 		@for $i from 0 through -$exponent {
 			$value: $value / $base; } }
-	// Return the last value written
+	// Return the last value written.
 	@return $value;
 }
 
-// All the sassy-gridlover-xxx mixins are based on the Gridlover app http://www.gridlover.net/app/
+// All the sassy-gridlover-xxx mixins are based on the Gridlover app http://www.gridlover.net/app.
 
-// $rem -> true/false (if you want to use rem units as well as pixels)
-
-@mixin sassy-gridlover-body($fontSize: $baseFontSize, $rem: false) {
-	font-size: $fontSize + px;
-	line-height: round(($fontSize * $baseLineHeight)) + px;
-	// Outputs rem units if 'true'
-	@if($rem == true) {
+// $unit: "px"		outputs pixels.
+// $unit: "rem"		outputs rems.
+// $unit: "pxrem"	outputs rems with pixels fallback.
+// $unit: "em"		outputs ems.
+@mixin sassy-gridlover-body($fontSize: $baseFontSize, $unit: "px") {
+	@if($unit == "px") {
+		font-size: $fontSize + $unit;
+		line-height: round(($fontSize * $baseLineHeight)) + $unit;
+	}
+	@if($unit == "rem") {
+		font-size: ($fontSize / $defaultFontSize) + $unit;
+		line-height: round(($fontSize * $baseLineHeight)) / $defaultFontSize + $unit;
+	}
+	@if($unit == "pxrem") {
+		// px fallback.
+		font-size: $fontSize + px;
+		line-height: round(($fontSize * $baseLineHeight)) + px;
+		// rem.
 		font-size: ($fontSize / $defaultFontSize) + rem;
 		line-height: round(($fontSize * $baseLineHeight)) / $defaultFontSize + rem;
 	}
+	@if($unit == "em") {
+		font-size: ($fontSize / $defaultFontSize) + $unit;
+		line-height: ($fontSize * $baseLineHeight) / $defaultFontSize + $unit;
+	}
 }
 
-// h1 -> $step: 3
-// h2 -> $step: 2
-// h3 -> $step: 1
-// h4 -> $step: 0
-@mixin sassy-gridlover-heading($step, $rem: false) {
+// h1 --> $step: 3
+// h2 --> $step: 2
+// h3 --> $step: 1
+// h4 --> $step: 0
+@mixin sassy-gridlover-heading($step, $unit: "px") {
 	$fontSize: $baseFontSize;
 	$scale: $scaleFactor;
 	$computedFontSize: round($fontSize * exponent($scale, $step));
 	$lineHeight: round($fontSize * $baseLineHeight);
 	$lines: ceil($computedFontSize / $lineHeight);
-	font-size: $computedFontSize + px;
-	line-height: $lineHeight * $lines + px;
-	margin-bottom: $lineHeight + px;
-	@if($step > 1) {
-		margin-top: $lineHeight * 2 + px;
+	@if($unit == "px") {
+		font-size: $computedFontSize + $unit;
+		line-height: $lineHeight * $lines + $unit;
+		margin-bottom: $lineHeight + $unit;
+		@if($step > 1) {
+			margin-top: $lineHeight * 2 + $unit;
+		}
+		@else {
+			margin-top: $lineHeight + $unit;
+		}
 	}
-	@else {
-		margin-top: $lineHeight + px;
+	@if($unit == "rem") {
+		font-size: $computedFontSize / $defaultFontSize + $unit;
+		line-height: ($lineHeight * $lines) / $defaultFontSize + $unit;
+		margin-bottom: $lineHeight / $defaultFontSize + $unit;
+		@if($step > 1) {
+			margin-top: ($lineHeight * 2) / $defaultFontSize + $unit;
+		}
+		@else {
+			margin-top: $lineHeight / $defaultFontSize + $unit;
+		}
 	}
-	// Outputs rem units if 'true'
-	@if($rem == true) {
+	@if($unit == "pxrem") {
+		// px fallback.
+		font-size: $computedFontSize + px;
+		line-height: $lineHeight * $lines + px;
+		margin-bottom: $lineHeight + px;
+		@if($step > 1) {
+			margin-top: $lineHeight * 2 + px;
+		}
+		@else {
+			margin-top: $lineHeight + px;
+		}
+		// rem.
 		font-size: $computedFontSize / $defaultFontSize + rem;
 		line-height: ($lineHeight * $lines) / $defaultFontSize + rem;
 		margin-bottom: $lineHeight / $defaultFontSize + rem;
@@ -61,13 +99,37 @@
 			margin-top: $lineHeight / $defaultFontSize + rem;
 		}
 	}
+	@if($unit == "em") {
+		font-size: $computedFontSize / $defaultFontSize + $unit;
+		line-height: ($lineHeight * $lines) / $defaultFontSize + $unit;
+		margin-bottom: $lineHeight / $defaultFontSize + $unit;
+		@if($step > 1) {
+			margin-top: ($lineHeight * 2) / $defaultFontSize + $unit;
+		}
+		@else {
+			margin-top: $lineHeight / $defaultFontSize + $unit;
+		}
+	}
 }
 
-@mixin sassy-gridlover-margins($rem: false) {
-	margin-bottom: round($baseFontSize * $baseLineHeight) + px;
-	margin-top: round($baseFontSize * $baseLineHeight) + px;
-	// Outputs rem units if 'true'
-	@if($rem == true) {
+@mixin sassy-gridlover-margins($unit: "px") {
+	@if($unit == "px") {
+		margin-bottom: round($baseFontSize * $baseLineHeight) + $unit;
+		margin-top: round($baseFontSize * $baseLineHeight) + $unit;
+	}
+	@if($unit == "rem") {
+		margin-bottom: round($baseFontSize * $baseLineHeight) / $defaultFontSize + $unit;
+		margin-top: round($baseFontSize * $baseLineHeight) / $defaultFontSize + $unit;
+	}
+	@if($unit == "em") {
+		margin-bottom: round($baseFontSize * $baseLineHeight) / $defaultFontSize + $unit;
+		margin-top: round($baseFontSize * $baseLineHeight) / $defaultFontSize + $unit;
+	}
+	@if($unit == "pxrem") {
+		// px fallback.
+		margin-bottom: round($baseFontSize * $baseLineHeight) + px;
+		margin-top: round($baseFontSize * $baseLineHeight) + px;
+		// rem.
 		margin-bottom: round($baseFontSize * $baseLineHeight) / $defaultFontSize + rem;
 		margin-top: round($baseFontSize * $baseLineHeight) / $defaultFontSize + rem;
 	}

diff --git a/scss/main.scss b/scss/main.scss
@@ -1,22 +1,22 @@
 @import "sassy-gridlover.scss";
 
 body {
-	@include sassy-gridlover-body($baseFontSize, true);
+	@include sassy-gridlover-body($baseFontSize, em);
 }
 
 h1 {
-	@include sassy-gridlover-heading(3, true);
+	@include sassy-gridlover-heading(3, em);
 }
 h2 {
-	@include sassy-gridlover-heading(2, true);
+	@include sassy-gridlover-heading(2, em);
 }
 h3 {
-	@include sassy-gridlover-heading(1, true);
+	@include sassy-gridlover-heading(1, em);
 }
 h4 {
-	@include sassy-gridlover-heading(0, true);
+	@include sassy-gridlover-heading(0, em);
 }
 
 p, ul, ol, pre, table, blockquote {
-	@include sassy-gridlover-margins(true);
+	@include sassy-gridlover-margins(em);
 }