Generated by SassMeister.com.

SassMeister-input.scss

// 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);
}

SassMeister-output.css

.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;
}