A little mixin to make CSS gradient borders easy peasy

gradient-borders.scss

/*
 * A little mixin to make CSS gradient borders easy peasy.
 * Just feed it two colors, a width and direction.
 * TODO: support 3+ color stops, more options
 *
 * A look at the mixin in action: http://codepen.io/EliFitch/pen/dorXeB
 * usage: @include gradient-border($green, $blue, 3px, 'to left')
 * 
 * Authored by Eli Fitch (https://github.com/elifitch)
 * Found at https://gist.github.com/elifitch/67ae7cfe1594abf8fb57
 */

@mixin gradient-border($color1, $color2, $border-width, $direction) {
    border: none;
    background-repeat: no-repeat;
    background-image: linear-gradient(#{$direction}, $color1 0%, $color2 100%), linear-gradient(#{$direction}, $color1 0%, $color2 100%);
    @if $direction == 'to right' or $direction == 'to left' {
        @if $direction == 'to right' {
            border-left: $border-width solid $color1;
            border-right: $border-width solid $color2;
        } @else {
            border-left: $border-width solid $color2;
            border-right: $border-width solid $color1;
        }

        background-position: 0 0, 0 100%;
        background-size: 100% $border-width;
    }

    @if $direction == 'to top' or $direction == 'to bottom' {
        @if $direction == 'to top' {
            border-top: $border-width solid $color2;
            border-bottom: $border-width solid $color1;
        } @else {
            border-top: $border-width solid $color1;
            border-bottom: $border-width solid $color2;
        }

        background-position: 0 0, 100% 0;
        background-size: $border-width 100%;
    }
}