A Sass port of jasny/bootstrap-em.less

_bootstrap-em.scss

@function strip-units($number) {// From : http://stackoverflow.com/a/12335841/1339426
  @return $number / ($number * 0 + 1);
}

/**
* Use em or rem font-size in Bootstrap 3
* Ported from Less version here: https://gist.github.com/jasny/9731895
*/
$font-size-root: 18px;
$font-unit: 1rem; // Pick em or rem here
 
 
// Convert all variables to em
 
$font-size-base: 1 * $font-unit;
$font-size-large: 1.25 * $font-unit;
$font-size-small: 0.85 * $font-unit;
 
$font-size-h1: 2.6 * $font-unit;
$font-size-h2: 2.15 * $font-unit;
$font-size-h3: 1.7 * $font-unit;
$font-size-h4: 1.25 * $font-unit;
$font-size-h5: $font-size-base;
$font-size-h6: 0.85 * $font-unit;
 
$line-height-computed: ($font-size-base * $line-height-base);
 
$padding-base-vertical: ((6px / $font-size-root) * $font-unit);
$padding-base-horizontal: ((12px / $font-size-root) * $font-unit);
 
$padding-large-vertical: ((10px / $font-size-root) * $font-unit);
$padding-large-horizontal: ((16px / $font-size-root) * $font-unit);
 
$padding-small-vertical: ((5px / $font-size-root) * $font-unit);
$padding-small-horizontal: ((10px / $font-size-root) * $font-unit);
 
$padding-xs-vertical: ((1px / $font-size-root) * $font-unit);
$padding-xs-horizontal: ((5px / $font-size-root) * $font-unit);
 
$border-radius-base: ((4px / $font-size-root) * $font-unit);
$border-radius-large: ((6px / $font-size-root) * $font-unit);
$border-radius-small: ((3px / $font-size-root) * $font-unit);
 
$caret-width-base: ((4px / $font-size-root) * $font-unit);
$caret-width-large: ((5px / $font-size-root) * $font-unit);

$table-cell-padding: ((8px / $font-size-root) * $font-unit);
$table-condensed-cell-padding: ((5px / $font-size-root) * $font-unit);
 
//** Default `.form-control` height
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2));
//** Large `.form-control` height
$input-height-large: (($font-size-large * $line-height-large) + ($padding-large-vertical * 2));
//** Small `.form-control` height
$input-height-small: (($font-size-small * $line-height-small) + ($padding-small-vertical * 2));


// Set root font size
 
html {
font-size: $font-size-root;
}
 
 
// Change styling for elements that mix pixels and ems
 
pre {
font-size: ( $font-size-base - ($font-unit / strip-units($font-size-root)));
}
 
.form-control-feedback {
width: calc($input-height-base + 2px);
height: calc($input-height-base + 2px);
}
.input-lg + .form-control-feedback {
width: calc($input-height-large + 2px);
height: calc($input-height-large + 2px);
}
.input-sm + .form-control-feedback {
width: calc($input-height-small + 2px);
height: calc($input-height-small + 2px);
}
 
.form-control {
height: calc($input-height-base + 2px);
}
 
.form-horizontal {
.radio, .checkbox, .radio-inline, .checkbox-inline {
padding: $padding-base-vertical;
border: 1px solid transparent;
}
.radio, .checkbox {
min-height: calc(($line-height-computed + $padding-base-vertical) + 1px);
}
.form-control-static {
padding-top: $padding-base-vertical;
border-top: 1px solid transparent;
padding-bottom: $padding-base-vertical;
border-bottom: 1px solid transparent;
}
 
@media (min-width: #{$screen-sm-min}) {
.control-label {
padding-top: $padding-base-vertical;
border-top: 1px solid transparent;
}
}
}

_nav-vertical-align.scss

// Navbar vertical align
//
// Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.

//Modified to work with _bootstrap-em.scss
@mixin navbar-vertical-align($element-height) {
	@if (unit($element-height) == unit($font-unit)) {
		margin-top: (($navbar-height - (($element-height / $font-unit) * $font-size-root)) / 2);
		margin-bottom: (($navbar-height - (($element-height / $font-unit) * $font-size-root)) / 2);
	} @else {
		margin-top: (($navbar-height - $element-height) / 2);
		margin-bottom: (($navbar-height - $element-height) / 2);
	}
}

_v2_bootstrap-em.scss

@function strip-units($number) {// From : http://stackoverflow.com/a/12335841/1339426
  @return $number / ($number * 0 + 1);
}

/**
* Use em or rem font-size in Bootstrap 3
* Based on Less version here: https://gist.github.com/jasny/9731895
* Values pulled from _variables.scss
*/
$font-size-root: $font-size-base;
$font-unit: 1rem; // Pick em or rem here
 
 
// Convert all variables to em
 
$font-size-base: 1 * $font-unit;
$font-size-large: ($font-size-large / $font-size-root) * $font-unit;
$font-size-small: ($font-size-small / $font-size-root) * $font-unit;

$font-size-h1: ($font-size-h1 / $font-size-root) * $font-unit;
$font-size-h2: ($font-size-h2 / $font-size-root) * $font-unit;
$font-size-h3: ($font-size-h3 / $font-size-root) * $font-unit;
$font-size-h4: ($font-size-h4 / $font-size-root) * $font-unit;
$font-size-h5: ($font-size-h5 / $font-size-root) * $font-unit;
$font-size-h6: ($font-size-h6 / $font-size-root) * $font-unit;
 
$line-height-computed: ($font-size-base * $line-height-base);
 
$padding-base-vertical: (($padding-base-vertical / $font-size-root) * $font-unit);
$padding-base-horizontal: (($padding-base-horizontal / $font-size-root) * $font-unit);
 
$padding-large-vertical: (($padding-large-vertical / $font-size-root) * $font-unit);
$padding-large-horizontal: (($padding-large-horizontal / $font-size-root) * $font-unit);
 
$padding-small-vertical: (($padding-small-vertical/ $font-size-root) * $font-unit);
$padding-small-horizontal: (($padding-small-horizontal / $font-size-root) * $font-unit);
 
$padding-xs-vertical: (($padding-xs-vertical / $font-size-root) * $font-unit);
$padding-xs-horizontal: (($padding-xs-horizontal / $font-size-root) * $font-unit);
 
$border-radius-base: (($border-radius-base / $font-size-root) * $font-unit);
$border-radius-large: (($border-radius-large / $font-size-root) * $font-unit);
$border-radius-small: (($border-radius-small / $font-size-root) * $font-unit);
 
$caret-width-base: (($caret-width-base / $font-size-root) * $font-unit);
$caret-width-large: (($caret-width-large / $font-size-root) * $font-unit);

$table-cell-padding: (($table-cell-padding / $font-size-root) * $font-unit);
$table-condensed-cell-padding: (($table-condensed-cell-padding / $font-size-root) * $font-unit);
 
//** Default `.form-control` height
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2));
//** Large `.form-control` height
$input-height-large: (($font-size-large * $line-height-large) + ($padding-large-vertical * 2));
//** Small `.form-control` height
$input-height-small: (($font-size-small * $line-height-small) + ($padding-small-vertical * 2));


// Set root font size
 
html {
font-size: $font-size-root;
}
 
 
// Change styling for elements that mix pixels and ems
 
pre {
font-size: ( $font-size-base - ($font-unit / strip-units($font-size-root)));
}
 
.form-control-feedback {
width: calc($input-height-base + 2px);
height: calc($input-height-base + 2px);
}
.input-lg + .form-control-feedback {
width: calc($input-height-large + 2px);
height: calc($input-height-large + 2px);
}
.input-sm + .form-control-feedback {
width: calc($input-height-small + 2px);
height: calc($input-height-small + 2px);
}
 
.form-control {
height: calc($input-height-base + 2px);
}
 
.form-horizontal {
.radio, .checkbox, .radio-inline, .checkbox-inline {
padding: $padding-base-vertical;
border: 1px solid transparent;
}
.radio, .checkbox {
min-height: calc(($line-height-computed + $padding-base-vertical) + 1px);
}
.form-control-static {
padding-top: $padding-base-vertical;
border-top: 1px solid transparent;
padding-bottom: $padding-base-vertical;
border-bottom: 1px solid transparent;
}
 
@media (min-width: #{$screen-sm-min}) {
.control-label {
padding-top: $padding-base-vertical;
border-top: 1px solid transparent;
}
}
}

Use either _bootstrap-em.scss OR _v2_bootstrap-em.scss not both.
The v2 file will update your values from _variables.scss, that way you don't have 2 places to set your values. The only thing you will have to do is set $font-unit to 1em if you prefer em to rem.
I'm currently building bootstrap with each module (is that the right term?) selected individually. I import _variables.scss, _v2_bootstrap-em.scss, the rest of bootstrap, then my site specific .scss.

I have to set html{ font-size in my site specific .scss as otherwise it will be overridden by _scaffolding.scss

I had to alter _nav-vertical-align.scss (frowny face) as _navbar.scss has px hardcoded in at several points, but uses variables which we have converted to em/rem at others. The file is included above.

I haven't compiled this with Glyphicons.

Great work - I do get $line-height-base missing as well as $line-height-large when I try and @import this before bootstrap-sass. I think this is perhaps because you've written it with the assumption that these variables are declared, but the current way with bootstrap-sass is to make use of their !default override behaviour. You'll notice in _variables.scss they use those:
https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss
You can override these values by @importing the gist you've written before @importing bootstrap-sass.

Sadly this does mean that your classes you've written then have to go after the inclusion of bootstrap-sass. This should all then allow the user to just drop in a line like this

@import "variables";
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "bootstrappost";

But sadly... there are still issues with calculations. Worth looking into, though!