Skip to content

Instantly share code, notes, and snippets.

@erin-dot-io

erin-dot-io/pixel-parity-rems.scss

Created March 27, 2013 20:38
Show Gist options
  • Save erin-dot-io/5257813 to your computer and use it in GitHub Desktop.
Save erin-dot-io/5257813 to your computer and use it in GitHub Desktop.
Download ZIP
Font-size pixel-parity REMs mixin for Sass/SCSS with legacy browser 'px' fallback. Neat!
Raw
pixel-parity-rems.scss
// the mixin
@mixin font-size($size: 16) {
font-size: ($size) + px;
font-size: ($size / 16) + rem;
}
// example
h6 { @include font-size(11); }
// will compile to
h6 {
font-size: 11px;
font-size: 0.6875rem;
}
@erin-dot-io
Copy link
Author

This allows you to set font size with the same numbering scheme as pixels ( 11 = 11px = 0.6875rem) while still giving you the ability to change font-size on the html tag inside media queries to scale text across your entire project.

Credit to https://github.com/aral/pixel-parity-rems

Thanks to this twitter thread: https://twitter.com/aral/status/311956401918468096 and @shaundunne (https://twitter.com/shaundunne) for creating this mixin, which I have shamelessly reproduced here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment