Created
August 5, 2015 15:31
-
-
Save TCotton/f5acaedb9c21b532f714 to your computer and use it in GitHub Desktop.
Font calculator mixin - sets font size, margin and 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
@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