Skip to content

Instantly share code, notes, and snippets.

@markandrewj
Last active September 9, 2015 00:48
Show Gist options
  • Save markandrewj/d6bdba3c2fdee0e43d3f to your computer and use it in GitHub Desktop.
Save markandrewj/d6bdba3c2fdee0e43d3f to your computer and use it in GitHub Desktop.
Pixel to EM
// Enter a base pixel size in px (without the px)
$basepx: 16;
// Convert PX to EM global function
@function pxtoem($px, $basepx){
@return ($px/$basepx)+0em;
}
//Then on a class or element you can use:
h1 { font-size: pxtoem(36, $basepx); }
h2 { font-size: pxtoem(28, $basepx); }
h3 { font-size: pxtoem(22, $basepx); }
.class { font-size: pxtoem(14, $basepx); }
//or on your media queries:
@media all and (min-width: pxtoem(600, $basepx)) {
.class {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment