Skip to content

Instantly share code, notes, and snippets.

@drifterz28
Last active January 25, 2017 06:32
Show Gist options
  • Save drifterz28/8450208 to your computer and use it in GitHub Desktop.
Save drifterz28/8450208 to your computer and use it in GitHub Desktop.
Sass mixins!
/**
* --- Index ---
* 1. vertical-align
* 2. transform-origin
* 3. transform
* 4. filter
*/
@mixin vendor-prefix($name, $value) {
@each $vendor in ('-webkit-', '-moz-', '-ms-', '-o-', '') {
#{$vendor}#{$name}: #{$value};
}
}
%vertical-align {
position: relative;
top: 50%;
@include transform(translateY(-50%));
}
@mixin transform-origin($origin) {
@include vendor-prefix('transform-origin', $origin);
}
@mixin transform($transform){
@include vendor-prefix('transform', $transform);
}
@mixin filter($filter){
@include vendor-prefix('filter', $filter);
}
@mixin translate($positionY, $positionX){
@include transform(translate($positionY, $positionX));
}
@mixin transition($transition){
@include vendor-prefix('transition', $transition);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment