sass-Kwf-stylesheets-_loading-animation.scss

@include "kwf/modernizr"

@mixin loading-animation-big($animationName, $path, $file, $width, $height, $params:"") {

    @include modernizr(cssanimations) {
        background: url($path + '/' + $file + '.png') $params;
        position: absolute;
        height: $height;
        width: $width;
        margin: 0 auto;
        display: block;
        content: '';
        left: 50%;
        top: 50%;
        margin-left: -($width / 2);
        margin-top: -($height / 2);
        -moz-animation: $animationName .5s infinite linear;
        -webkit-animation: $animationName .5s infinite linear;
        animation: $animationName .5s infinite linear;

        @media (min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.1) {
            & {
                background-image: url($path + '/dpr2/' + $file + '.png');
                background-size: $width $height;
                -webkit-background-size: $width $height;
            }
        }
    }

    @include modernizr-no(cssanimations) {
        background: url($path + '/' + $file + '.gif') $params;
        position: absolute;
        height: $height;
        width: $width;
        margin: 0 auto;
        display: block;
        content: '';
        left: 50%;
        top: 50%;
        margin-left: -($width / 2);
        margin-top: -($height / 2);
    }
}

sass-Kwf-stylesheets-config-_loading-animation.scss

@import "kwf/loading-animation.scss";

@mixin default-loading-animation-big() {
    @include loading-animation-big(kwfLoadingSpin, /assets/kwf/images/loading, loadingbig, 50px, 50px, no-repeat scroll center center transparent);
}

sass_Kwf_stylesheets__modernizr.scss

// Modernizr mixin to create html.modernizr selector
@mixin modernizr($test) {
    html.#{$test} & {
        @content;
    }
}
@mixin modernizr-no($test, $no: true) {
    html.no-#{$test} & {
        @content;
    }
}