Created
September 5, 2011 11:25
-
-
Save jabneyhastings/1194732 to your computer and use it in GitHub Desktop.
LESS Snippet for using rem as a unit for font-size
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
| // ABOUT | |
| A simple LESS (http://lesscss.org) snippet based on http://snook.ca/archives/html_and_css/font-size-with-rem | |
| It doesn't do much but saves you typing things twice, allowing you to use rem as a unit for font-sizes | |
| and giving a px fallback for IE | |
| // MIXIN | |
| .font-size(@font-size: 16){ | |
| @rem: (@font-size / 10); | |
| font-size: @font-size * 1px; | |
| font-size: ~"@{rem}rem"; | |
| } | |
| // USE | |
| html { font-size: 62.5%; } // Needed to make 1em equal 10px | |
| body { | |
| .font-size(); // Uses the default font-size of 16 | |
| } | |
| h1 { | |
| .font-size(42); // Gives a font-size based on 42px (the font-size of life, the universe, and everything) | |
| } | |
| // OUTPUTS | |
| html { font-size: 62.5%; } | |
| body { | |
| font-size: 16px; | |
| font-size: 1.6rem; | |
| } | |
| h1 { | |
| font-size: 42px; | |
| font-size: 4.2rem; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment