Skip to content

Instantly share code, notes, and snippets.

@juliocesar
Last active November 26, 2020 17:54
Show Gist options
  • Save juliocesar/8105794 to your computer and use it in GitHub Desktop.
Save juliocesar/8105794 to your computer and use it in GitHub Desktop.
// 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
Copy link

ghost commented Apr 19, 2014

@mixin prefix($property, $parameters...) {
  @each $prefix in -webkit-, -moz-, -ms-, -o-, "" {
    #{$prefix}#{$property}: $parameters;
  }
}

block { 
  @include prefix(test, comma, separated, values);
};

block { 
  @include prefix(filter, grayscale(100%) sepia(25%));
}

// it's not perfect, but it's small.

@raksa
Copy link

raksa commented Jan 17, 2017

@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}

@deependhamecha
Copy link

@mixin box-shadow($value) {
  -webkit-box-shadow: $value;
  -moz-box-shadow: $value;
  box-shadow: $value;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment