Skip to content

Instantly share code, notes, and snippets.

@raksa
Last active April 15, 2022 11:42
Show Gist options
  • Save raksa/fa61d5e5f7abbea515d7701be6b79dd5 to your computer and use it in GitHub Desktop.
Save raksa/fa61d5e5f7abbea515d7701be6b79dd5 to your computer and use it in GitHub Desktop.
Vendor prefix mixin for sass.
@mixin prefix-border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
// http://joshbroton.com/quick-fix-sass-mixins-for-css-keyframe-animations/
@mixin animation($animate...) {
$max: length($animate);
$animations: '';
@for $i from 1 through $max {
$animations: #{$animations + nth($animate, $i)};
@if $i < $max {
$animations: #{$animations + ", "};
}
}
-webkit-animation: $animations;
-moz-animation: $animations;
-o-animation: $animations;
animation: $animations;
}
@mixin keyframes($animationName) {
@-webkit-keyframes #{$animationName} {
@content;
}
@-moz-keyframes #{$animationName} {
@content;
}
@-o-keyframes #{$animationName} {
@content;
}
@keyframes #{$animationName} {
@content;
}
}
// https://gist.github.com/juliocesar/8105794
// Prefix mixins
// =============
//
// A set of SASS mixins for abstracting vendor prefixes.
@mixin background-size($parameters) {
-webkit-background-size: $parameters;
-moz-background-size: $parameters;
-o-background-size: $parameters;
background-size: $parameters;
}
@mixin prefix-background-clip($parameters) {
-webkit-background-clip: $parameters;
-moz-background-clip: $parameters;
-ms-background-clip: $parameters;
background-clip: $parameters;
}
@mixin prefix-transition($parameters...) {
-webkit-transition: $parameters;
-moz-transition: $parameters;
-ms-transition: $parameters;
transition: $parameters;
}
@mixin prefix-perspective($parameters) {
-webkit-perspective: $parameters;
-moz-perspective: $parameters;
-ms-perspective: $parameters;
perspective: $parameters;
}
@mixin prefix-transition-delay($parameters) {
-webkit-transition-delay: $parameters;
-moz-transition-delay: $parameters;
-ms-transition-delay: $parameters;
transition-delay: $parameters;
}
@mixin prefix-transform($parameters) {
-webkit-transform: $parameters;
-moz-transform: $parameters;
-ms-transform: $parameters;
transform: $parameters;
}
@mixin prefix-transform-origin($parameters) {
-webkit-transform-origin: $parameters;
-moz-transform-origin: $parameters;
-ms-transform-origin: $parameters;
transform-origin: $parameters;
}
@mixin prefix-animation($parameters) {
-webkit-animation: $parameters;
-moz-animation: $parameters;
-ms-animation: $parameters;
animation: $parameters;
}
@mixin prefix-animation-delay($parameters) {
-webkit-animation-delay: $parameters;
-moz-animation-delay: $parameters;
-ms-animation-delay: $parameters;
animation-delay: $parameters;
}
@mixin prefix-animation-fill-mode($parameters) {
-webkit-animation-fill-mode: $parameters;
-moz-animation-fill-mode: $parameters;
-ms-animation-fill-mode: $parameters;
animation-fill-mode: $parameters;
}
@mixin prefix-animation-play-state($parameters) {
-webkit-animation-play-state: $parameters;
-moz-animation-play-state: $parameters;
-ms-animation-play-state: $parameters;
animation-play-state: $parameters;
}
@mixin prefix-user-select($parameters) {
-webkit-user-select: $parameters;
-moz-user-select: $parameters;
user-select: $parameters;
}
@mixin prefix-filter($parameters) {
-webkit-filter: $parameters;
-moz-filter: $parameters;
-ms-filter: $parameters;
filter: $parameters;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment