Skip to content

Instantly share code, notes, and snippets.

@seanemmel-ba
Last active October 22, 2015 17:43
Show Gist options
  • Save seanemmel-ba/141006d0598fc1afbfee to your computer and use it in GitHub Desktop.
Save seanemmel-ba/141006d0598fc1afbfee to your computer and use it in GitHub Desktop.
A few helpful mixins for vendor-prefixing, transitions, and borders
@mixin borderRadius($topRight, $bottomRight, $bottomLeft, $topLeft) {
-webkit-border-top-right-radius: $topRight;
-moz-border-top-right-radius: $topRight;
-ms-border-top-right-radius: $topRight;
-o-border-top-right-radius: $topRight;
border-top-right-radius: $topRight;
-webkit-border-bottom-right-radius: $bottomRight;
-moz-border-bottom-right-radius: $bottomRight;
-ms-border-bottom-right-radius: $bottomRight;
-o-border-bottom-right-radius: $bottomRight;
border-bottom-right-radius: $bottomRight;
-webkit-border-bottom-left-radius: $bottomLeft;
-moz-border-bottom-left-radius: $bottomLeft;
-ms-border-bottom-left-radius: $bottomLeft;
-o-border-bottom-left-radius: $bottomLeft;
border-bottom-left-radius: $bottomLeft;
-webkit-border-top-left-radius: $topLeft;
-moz-border-top-left-radius: $topLeft;
-ms-border-top-left-radius: $topLeft;
-o-border-top-left-radius: $topLeft;
border-top-left-radius: $topLeft;
}
@mixin transition($transition-property, $transition-time, $method) {
-webkit-transition: $transition-property $transition-time $method;
-moz-transition: $transition-property $transition-time $method;
-ms-transition: $transition-property $transition-time $method;
-o-transition: $transition-property $transition-time $method;
transition: $transition-property $transition-time $method;
}
@mixin vendorify($property, $value) {
-webkit-#{$property}: #{$value};
-moz-#{$property}: #{$value};
-o-#{$property}: #{$value};
-ms-#{$property}: #{$value};
#{$property}: #{$value};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment