Remove font-size fallback from mixin in favour of rem (#417)

ukparliament · Mar 28, 2018 · f00f3df · f00f3df
1 parent 54840e0
commit f00f3df
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/src/stylesheets/elements/_body.scss b/src/stylesheets/elements/_body.scss
@@ -6,7 +6,7 @@
 @import '../elements/semantic-elements';
 
 html {
-  font-size: 16px;
+  font-size: $base-font-size;
 }
 
 body {

diff --git a/src/stylesheets/settings/_fonts.scss b/src/stylesheets/settings/_fonts.scss
@@ -35,3 +35,4 @@
 }
 
 $base-font-stack: 'National', Arial, 'Helvetica Neue', Helvetica, sans-serif;
+$base-font-size: 16px;
diff --git a/src/stylesheets/settings/_mixins.scss b/src/stylesheets/settings/_mixins.scss
@@ -9,9 +9,11 @@
 
 /*--- Font Size [size] Pass Pixel value to get REM/Pixel fallback ---*/
 
-@mixin fontsize($size){
-  font-size:   $size + 0px;
-  font-size:   ($size / 16) + 0rem;
+@mixin fontsize($size) {
+  /* If you divide a united value ($base-font-size) by 1px, it becomes unitless.
+     Since you cannot merge two units (px and rem, in this case), you have to make one unitless.
+  */
+  font-size: ($size / ($base-font-size / 1px)) + 0rem;
 }
 
 /*--- Border Radius [top left, top right, bottom right, bottom left] ---*/