Forked again, but with additions to the EM translation functions to include default font size. I found out if you change the font size in an element, then do anything else with EMs in that same element, it changes what an EM actually is. With these additions, you can include the new font size and the widths will end up being the same as they wou…

mixins.scss

@mixin bp($point) {

	@if $point == print {
		@media only print { @content; }
	}

}

@mixin em_width($px, $default: 16) { width: #{$px / $default}em; }
@mixin em_height($px, $default: 16) { height: #{$px / $default}em; }
@mixin em_maxwidth($px, $default: 16) { max-width: #{$px / $default}em; }
@mixin em_minwidth($px, $default: 16) { min-width: #{$px / $default}em; }
@mixin em_maxheight($px, $default: 16) { max-height: #{$px / $default}em; }
@mixin em_minheight($px, $default: 16) { min-height: #{$px / $default}em; }
@mixin em_margin($top:0,$right:0,$bot:$top,$left:$right, $default: 16) { margin: #{$top / $default}em #{$right / $default}em #{$bot / $default}em #{$left / $default}em }
@mixin em_padding($top:0,$right:0,$bot:$top,$left:$right, $default: 16) { padding: #{$top / $default}em #{$right / $default}em #{$bot / $default}em #{$left / $default}em }
@mixin em_fontsize($px) { font-size: #{$px / 16}em; }

@mixin box_shadow($hoffset: 0, $voffset: 0, $blur: 0, $spread: 0, $color: $black, $inset: false) {

	@if $inset == false {
		-webkit-box-shadow: $hoffset $voffset $blur $spread $color;
		box-shadow: $hoffset $voffset $blur $spread $color;
	} @else {
		-webkit-box-shadow: inset $hoffset $voffset $blur $spread $color;
		box-shadow: inset $hoffset $voffset $blur $spread $color;
	}

}

@mixin opacity($i) {
	$forie: $i * 100;

	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity="+$forie+")";
	filter: alpha(opacity=$forie);
	opacity: $i;
}

@mixin transition($sel: all,$time: 1s,$ease: linear) {
	-webkit-transition: $sel $time $time;
	-moz-transition: $sel $time $time;
	-o-transition: $sel $time $time;
	-ms-transition: $sel $time $time;
	transition: $sel $time $time;
}

// My setup for sprites
@import "../img/*.png";
@include all-img-sprites;

$sprites: logo_header cats;

@mixin sprite-dimensions($name) {
  width: img-sprite-width($name);
	height: img-sprite-height($name);
}

.sprite {

	display: inline-block;	
	background-color: transparent;

}

@each $sprite in $sprites {
	.#{$sprite} {
		@include img-sprite($sprite); 
		@include sprite-dimensions($sprite);
	}
}