@mixin transition($duration) {
    -webkit-transition: #{$duration};
    -moz-transition: #{$duration};
    transition: #{$duration};
}

@mixin edge-transition($device: "") {
    %#{$device}transition {
        @include transition($transition-duration);
    }

    %#{$device}transition-none {
        @include transition(0s);
    }

    @if $classes {
        .#{$device}transition {
            @extend %#{$device}transition;
        }

        .#{$device}transition-none {
            @extend %#{$device}transition-none;
        }
    }
}

@include edge-transition;

@each $device, $pixels in $devices {
    @include media($device) {
        @include edge-transition($device + "-");
    }
}

@include mobile {
    @include edge-transition("mobile-");
}