Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// Round $n to the nearest $m
@function roundUp($n, $m) {
@return round(($n/$m))*$m;
}
// Get unitless values
@function parseInt($n) {
@return $n / ($n * 0 + 1);
}
@mixin height($font-size, $desired-height, $rem: true, $font-base: 16, $baseline: 4){
$font-unit: unit($font-size);
$font-value: parseInt($font-size) !default;
$height-unit: unit($desired-height);
$height-value: parseInt($desired-height) !default;
$font-base: parseInt($font-base);
$baseline: parseInt($baseline) !default;
// If rems are enforced
@if $rem == true {
// Convert the baseline to unitless rems
$baseline: $baseline/$font-base;
// If the font size is in rems
@if $font-unit != 'rem' {
$font-value: $font-value/$font-base;
}
// If the height is in rems
@if $height-unit != 'rem' {
$height-value: $height-value/$font-base;
}
}
// If rems are not enforced
@else if $rem == false {
// If the font size is in rems
@if $font-unit == 'rem' {
$font-value: $font-value * $font-base;
}
// If the height is in rems
@if $height-unit == 'rem' {
$height-value: $height-value * $font-base;
}
}
@if $height-unit != 'rem' and $height-unit != 'px' {
@error '#{$height-unit} is not supported!'
}
@if $font-unit != 'rem' and $font-unit != 'px' {
@error '#{$font-unit} is not supported!'
}
// Warn if the font-size is greater than the height
@if $font-value > $height-value {
@warn 'The font size should not exceed the desired height due to negative padding.';
}
// Calulate the relative, valueless line-height
$lh: ( roundUp($font-value, $baseline) + $baseline ) / $font-value;
// Calculate the actual px dimensions
$lh-realised: $font-value * $lh;
// Calculate the remaining space available and halve it
$offset: ($height-value - $lh-realised)/2;
// Debug
// rem: $rem;
// font-value: $font-value;
// font-unit: $font-unit;
// height-value: $height-value;
// height-unit: $height-unit;
// lh: $lh;
// lh-realised: $lh-realised;
// offset: $offset;
line-height: $lh;
font-size: if($rem, $font-value + rem, $font-size);
padding-bottom: if($rem, $offset + rem, $offset + px);
padding-top: if($rem, $offset + rem, $offset + px);
}
// Check out http://codepen.io/craigmdennis/pen/VYqJqq
// to see some examples
.rems-from-pixels {
@include height(20px, 32px);
}
.rems-from-rems {
@include height(1.25rem, 2rem);
}
.pixels-from-pixels {
@include height(20px, 32px, false);
}
.pixels-from-rems {
@include height(1.25rem, 2rem, false);
}
.mix-and-match {
@include height(20px, 2rem);
}
.rems-from-pixels {
line-height: 1.2;
font-size: 1.25rem;
padding-bottom: 0.25rem;
padding-top: 0.25rem;
}
.rems-from-rems {
line-height: 1.2;
font-size: 1.25rem;
padding-bottom: 0.25rem;
padding-top: 0.25rem;
}
.pixels-from-pixels {
line-height: 1.2;
font-size: 20px;
padding-bottom: 4px;
padding-top: 4px;
}
.pixels-from-rems {
line-height: 1.2;
font-size: 1.25rem;
padding-bottom: 4px;
padding-top: 4px;
}
.mix-and-match {
line-height: 1.2;
font-size: 1.25rem;
padding-bottom: 0.25rem;
padding-top: 0.25rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.