drifterz28
1/16/2014 - 5:20 AM

Sass mixins!

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);
}