Skip to content

Instantly share code, notes, and snippets.

@sdthornton
Last active August 28, 2015 22:28
Show Gist options
  • Save sdthornton/6b0bbd2bb40e07db1457 to your computer and use it in GitHub Desktop.
Save sdthornton/6b0bbd2bb40e07db1457 to your computer and use it in GitHub Desktop.
SASS transform mixin with fallback for IE9.
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
@mixin transform($trans...) {
$fallback: unquote(str-replace(str-replace("#{$trans}", '3d', ''), ', 0)', ')'));
-ms-transform: $fallback;
$prefixes: (ms, moz, o, webkit);
@each $prefix in $prefixes {
#{'-' + $prefix + '-transform'}: $trans;
}
transform: $trans;
}
body {
@include transform(translate3d(0,0,0), scale3d(0,0,0));
}
// RETURNS
//
// body {
// -ms-transform: translate(0, 0), scale(0, 0);
// -ms-transform: translate3d(0, 0, 0), scale3d(0, 0, 0);
// -moz-transform: translate3d(0, 0, 0), scale3d(0, 0, 0);
// -o-transform: translate3d(0, 0, 0), scale3d(0, 0, 0);
// -webkit-transform: translate3d(0, 0, 0), scale3d(0, 0, 0);
// transform: translate3d(0, 0, 0), scale3d(0, 0, 0);
// }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment