Sass position mixin that uses transforms (translateX/translateY) when available

position.scss

/** Sass mixins to position stuff with transforms when they're available with Modernizr and with usual position values otherwise
*
* instead of writing `bottom: 7px`, just write `@include bottom(7px)`
**/
@mixin __position($pos, $value) {
	html.no-csstransforms & {
		#{$pos}: $value;
	}
	html.csstransforms & {
		@if $pos == right or $pos == bottom {
			$value: -1*$value;
		}
		@if $pos == left or $pos == right {
			@include transform(translateX(#{$value}));
		}
		@if $pos == top or $pos == bottom {
			@include transform(translateY(#{$value}));
		}
	}
}
@mixin top($value) { @include __position(top, $value); }
@mixin bottom($value) { @include __position(bottom, $value); }
@mixin left($value) { @include __position(left, $value); }
@mixin right($value) { @include __position(right, $value); }