Skip to content

Instantly share code, notes, and snippets.

@aklump
Last active October 6, 2015 03:07
Show Gist options
  • Save aklump/2925506 to your computer and use it in GitHub Desktop.
Save aklump/2925506 to your computer and use it in GitHub Desktop.
Output font-size in rem with px fallback
/**
* Output font-size (and line-height) in rem with px fallback
*
* After declaring a font-size of 100% on the html tag, you should use the
@font_size for all other font-size declarations.
*
* @code
* html {
* font: 100%/1.4 "Times New Roman", Times, Serif normal;
* }
* p {
* @include font_size(.875rem, 1.5);
* }
* @endcode
*
* @param $size
* rem and px: will be converted to rem with px fallback
* % and em will pass through without conversion
* @param $line_height
* Optional, behaves same as $size
*
* @author Aaron Klump, In the Loft Studios, LLC
* @see http://www.intheloftstudios.com
* @see http://gist.github.com/2925506
*/
@mixin font-size($size, $line_height: false){
$rem_ratio: 16px / 1rem;
$unit: unit($size);
@if $unit == 'rem' {
font-size: $size * $rem_ratio;
font-size: $size;
}
@else if $unit == 'px' {
font-size: $size;
font-size: $size / $rem_ratio;
}
@else {
font-size: $size;
}
@if $line_height {
$unit: unit($line_height);
@if $unit == 'rem' {
line-height: $line_height * $rem_ratio;
line-height: $line_height;
}
@else if $unit == 'px' {
line-height: $line_height;
line-height: $line_height / $rem_ratio;
}
@else {
line-height: $line_height;
}
}
}
/**
* Convert rem to pixels
*
* @param mixed $rem
*
* @return mixed
*/
@function rem_px($rem) {
$rem_ratio: 16px / 1rem;
@return $rem * $rem_ratio;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment