Skip to content

Instantly share code, notes, and snippets.

@syahrasi
Last active December 31, 2020 12:59
Show Gist options
  • Save syahrasi/5821739 to your computer and use it in GitHub Desktop.
Save syahrasi/5821739 to your computer and use it in GitHub Desktop.
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
$font-sizes: 6 7 8 9 10 11 12 14 16 18 21 24 36 48 60 72 84 96;
$selector-sizes: ".micro" ".milli" "h6, .zeta" "h5, .epsilon" "h4, .delta" "h3, .gamma" "h2, .beta" "h1, .alpha" ".kilo" ".mega" ".giga";
$base-font-size: 16;
$base-font-size-idx: index($font-sizes, $base-font-size);
$font-class-start-idx: $base-font-size-idx - 3;
$base-line-height: $base-font-size * 1.5;
@mixin line-height($font-size, $base-line-height) {
line-height: ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
}
@function pem($px, $base) {
@return #{$px / $base}em;
}
@for $i from 1 to (length($selector-sizes) + 1) {
#{nth($selector-sizes, $i)} {
$font-size: nth($font-sizes, $i + $font-class-start-idx);
font-size: pem($font-size, $base-font-size);
@include line-height($font-size, $base-line-height);
}
}
.micro {
font-size: 0.75em;
line-height: 2;
}
.milli {
font-size: 0.875em;
line-height: 1.71429;
}
h6, .zeta {
font-size: 1em;
line-height: 1.5;
}
h5, .epsilon {
font-size: 1.125em;
line-height: 1.33333;
}
h4, .delta {
font-size: 1.3125em;
line-height: 1.14286;
}
h3, .gamma {
font-size: 1.5em;
line-height: 1;
}
h2, .beta {
font-size: 2.25em;
line-height: 1.33333;
}
h1, .alpha {
font-size: 3em;
line-height: 1;
}
.kilo {
font-size: 3.75em;
line-height: 1.2;
}
.mega {
font-size: 4.5em;
line-height: 1;
}
.giga {
font-size: 5.25em;
line-height: 1.14286;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment