Animations

@mixin keyframes($name) {

    @-ms-keyframes #{$name} {
        @content
    }
    @-o-keyframes #{$name} {
        @content
    }
    @-moz-keyframes #{$name} {
        @content
    }
    @-webkit-keyframes #{$name} {
        @content
    }
    @keyframes #{$name} {
        @content
    }
}

@mixin animation($val) {
    -ms-animation: $val;
    -o-animation: $val;
    -webkit-animation: $val;
    -moz-animation: $val;
    animation: $val;
}

Example

@include animation((
    delay: .8s,
    duration: 1.6s,
    iteration-count: 1,
    name: fadeFromHilite,
    fill-mode: forwards
));
@include keyframes(fadeFromHilite) {
    0% { background: red }
    100% { background: #fff; }
}

Backgrounds

@mixin background($args) {
    @each $prop,$val in $args {
        background-#{$prop}: $val;
    }
}

Example

.element {
    @include background((
        color: red,
        position: center,
        size: contain,
        image: url("file.jpg")
    ));
}

General Vendor Prefixing

@mixin prefix($args) {
    @each $prop,$val in $args {
        -ms-#{$prop}: $val;
        -o-#{$prop}: $val;
        -webkit-#{$prop}: $val;
        -moz-#{$prop}: $val;
        #{$prop}: $val;
    }
}

Example

.element {
    @include prefix((filter: blur(2px)));
}