Created
December 12, 2012 13:37
-
-
Save daneden/4267775 to your computer and use it in GitHub Desktop.
[FIXED: See comments] I'm using rems for a lot of the layout for a site I'm working on—mostly font-size and margin-bottoms—and I'm having a bit of trouble mixing values. In the example below, the expected output would give a font-size value of 30px, but instead gives 30%px. Any ideas?
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
| $base-font-size: 125%; | |
| @mixin rem-font-size($sizeValue: 1){ | |
| font-size: ($sizeValue * (16 * ($base-font-size / 100))) + px; | |
| font-size: $sizeValue + rem; | |
| } | |
| @mixin rem-margin-bottom($sizeValue: 1){ | |
| margin-bottom: ($sizeValue * (16 * ($base-font-size / 100))) + px; | |
| margin-bottom: $sizeValue + rem; | |
| } | |
| h1 { | |
| @include rem-margin-bottom(1.5); | |
| } |
Just in case somebody else is curious, you need to do the math on the units too, so px * % / % will return you just px, as you want. Glad it worked for you. :)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Fixed thanks to this tweet. Turns out you have to use the correct unit in the maths as well. My bad. Thanks all!