Created
November 4, 2012 16:16
-
-
Save gmclelland/4012459 to your computer and use it in GitHub Desktop.
Showing the expected output of the rem mixin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
I'm trying to do this: | |
html{ | |
font-size:62.5%; | |
} | |
body{ | |
@include rem(font-size, 14px); | |
line-height:1.6; | |
} | |
But I believe the rem mixin gives me this with the following: | |
$browser-default-font-size: 16px; // Is this right? | |
$base-font-size: 10px !default; // Is this right? | |
html{ | |
font-size:62.5%; | |
} | |
body{ | |
font-size: 14px; | |
font-size: .875rem; | |
} | |
I was expecting the following: | |
html{ | |
font-size:62.5%; | |
} | |
body{ | |
font-size: 14px; | |
font-size: 1.4rem; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I suspect the $base-font-size variable is not being set with the correct value. The mixin's $base-font-size is a configurable variable. You should set it in your own stylesheet before importing the mixin.
Should compile to:
However, since you are using mixins to help size your text, you don't really need the 62.5% technique to give you a round number to work from. It seems that your real desired base font-size is 14px. Sass gives us the power to set it that way!
By the way you should also check out the Compass vertical rhythm module. It's great for working with type sizing and spacing even if you're not a strict proponent of baseline grids on the web. The master branch (not yet released) will support rems and pixel fallbacks.