Skip to content

Instantly share code, notes, and snippets.

@TCotton
Created August 5, 2015 15:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save TCotton/f5acaedb9c21b532f714 to your computer and use it in GitHub Desktop.
Save TCotton/f5acaedb9c21b532f714 to your computer and use it in GitHub Desktop.
Font calculator mixin - sets font size, margin and font-size
@function strip-units($number) {
@return $number / ($number * 0 + 1);
}
// increases margin-bottom if font size is greater than 20px
@function double-size($fontSize, $marginNumber) {
@if strip-units($fontSize) > 20 {
@return $marginNumber * 1;
} @else {
@return $marginNumber;
}
}
@function basefont-to-pixel($baseFS) {
// see http://pxtoem.com/
@if $baseFS == 37.5% {
@return 6;
} @else if $baseFS == 43.8% {
@return 7;
} @else if $baseFS == 50.0% {
@return 8;
} @else if $baseFS == 56.3% {
@return 9;
} @else if $baseFS == 62.5% {
@return 10;
} @else if $baseFS == 68.8% {
@return 11;
} @else if $baseFS == 75.0% {
@return 12;
} @else if $baseFS == 81.3% {
@return 13;
} @else if $baseFS == 87.5% {
@return 14;
} @else if $baseFS == 93.8% {
@return 15;
} @else if $baseFS == 100.0% {
@return 16;
}
}
@mixin font-calculator($fontFamily, $fontSize, $divider: null) {
$fontSizeEm: strip-units($fontSize) / basefont-to-pixel($baseFontSize);
font-size: #{$fontSizeEm}#{"em"};
font-family: #{$fontFamily};
@if $divider == 0 {
$margin: null;
} @else if $divider == 2 {
$margin: (strip-units($baseLineHeight) / $fontSizeEm) * 2;
margin-bottom: #{double-size($fontSize, $margin)}#{"em"};
} @else if $divider == 1 {
$margin: (strip-units($baseLineHeight) / $fontSizeEm);
margin-bottom: #{double-size($fontSize, $margin)}#{"em"};
} @else if $divider == 1.5 {
$margin: (strip-units($baseLineHeight) / $fontSizeEm) * 1.5;
margin-bottom: #{double-size($fontSize, $margin)}#{"em"};
} @else if $divider == 0.5 {
$margin: strip-units($baseLineHeight) / $fontSizeEm / 2;
margin-bottom: #{double-size($fontSize, $margin)}#{"em"};
} @else if $divider == 0.25 {
$margin: strip-units($baseLineHeight) / $fontSizeEm / 4;
margin-bottom: #{double-size($fontSize, $margin)}#{"em"};
} @else if $divider == null {
$margin: strip-units($baseLineHeight) / $fontSizeEm;
margin-bottom: #{double-size($fontSize, $margin)}#{"em"};
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment