Skip to content

Instantly share code, notes, and snippets.

@kerelist
Created November 22, 2016 21:18
Show Gist options
  • Save kerelist/7ffbdf2fb459cf25fe2f9d4f7a59c5af to your computer and use it in GitHub Desktop.
Save kerelist/7ffbdf2fb459cf25fe2f9d4f7a59c5af to your computer and use it in GitHub Desktop.
A function/mixin set to set up all of your base font sizes in one @include statement.
//EXPONENT FUNCTION
//https://css-tricks.com/snippets/sass/power-function/
@function pow($number, $exponent) {
$value: 1;
@if $exponent > 0 {
@for $i from 1 through $exponent {
$value: $value * $number;
}
}
@return $value;
}
//FONT SETUP
//change variables to change the scale of base to h1 sizing
@mixin font-setup($base-size, $header-font, $body-font, $font-units, $line-height, $size-ratio) {
//size ratio references @ http://type-scale.com/
body {
font-size: #{$base-size}$font-units;
font-family: $body-font;
line-height: $line-height;
}
h1, h2, h3, h4, h5, h6 {
font-family: $header-font;
}
h5 {
font-weight: 700;
}
h4 {
font-size: #{$base-size * pow($size-ratio, 1)}$font-units;
}
h3 {
font-size: #{$base-size * pow($size-ratio, 2)}$font-units;
}
h2 {
font-size: #{$base-size * pow($size-ratio, 3)}$font-units;
}
h1 {
font-size: #{$base-size * pow($size-ratio, 4)}$font-units;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment