βLast updated 9 February 2021
This is the most complete cross and backwards browser compatible list of Sass mixins using vendor prefixes. I use this bad boy every day β src download link in footer. If you have any additions please comment below! Enjoy.
/* Mixins Author - Andy Crone | @andycrone_ + Popular mixins including vendor prefixes for cross-browser support */ // === Standard layout & styling @mixin box-sizing($value){ -webkit-box-sizing: $value; -moz-box-sizing: $value; box-sizing: $value; } @mixin box-shadow($value){ -webkit-box-shadow: $value; -moz-box-shadow: $value; box-shadow: $value; } @mixin border-radius($value){ -moz-border-radius: $value; -webkit--radius: $value; border-radius: $value; } @mixin background-size($value){ -o-background-size: $value; -webkit-background-size: $value; -moz-background-size: $value; background-size: $value; } @mixin linear-gradient($angle,$gradient1, $gradient2) { background-color: $gradient2; /* Fallback Color */ background-image: -webkit-gradient(linear, $angle, from($gradient1), to($gradient2)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient($angle, $gradient1, $gradient2); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient($angle, $gradient1, $gradient2); /* FF3.6 */ background-image: -ms-linear-gradient($angle, $gradient1, $gradient2); /* IE10 */ background-image: -o-linear-gradient($angle, $gradient1, $gradient2); /* Opera 11.10+ */ background-image: linear-gradient($angle, $gradient1, $gradient2); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=$angle,StartColorStr='#{$gradient1}', EndColorStr='#{$gradient2}'); } // === Animations @mixin transition($value) { -webkit-transition: $value; transition: $value; } @mixin transform($value) { -o-transform: $value; -ms-transform: $value; -webkit-transform: $value; transform: $value; } @mixin transform-origin ($value) { -o-transform-origin: $value; -ms-transform-origin: $value; -webkit-transform-origin: $value; transform-origin: $value; } @mixin animation($name, $duration, $timing, $type){ -o-animation: $name $duration $timing $type; -moz-animation: $name $duration $timing $type; -webkit-animation: $name $duration $timing $type; animation: $name $duration $timing $type; } @mixin animation-delay($value){ -o-animation: $value; -moz-animation: $value; -webkit-animation: $value; animation: $value; } @mixin keyframes($value) { @-webkit-keyframes #{$value} { @content; } @-moz-keyframes #{$value} { @content; } @-o-keyframes #{$value} { @content; } @keyframes #{$value} { @content; } } // === Filters @mixin filter($value){ -o-filter: $value; -ms-filter: $value; -webkit-filter: $value; -moz-filter: $value; filter: $value; } // === Browser mods @mixin appearance($value){ -moz-appearance: $value; -webkit-appearance: $value; appearance: $value; } @mixin user-select($value){ -webkit-touch-callout: $value; -webkit-user-select: $value; -khtml-user-select: $value; -moz-user-select: $value; -ms-user-select: $value; user-select: $value; }
Thanks! Iβd love you to share these if you find them useful :).