Sass error “Function X finished without @return”

Question

I'm having some trouble trying to convert a fairly complex gradient, into a mixin for SASS, most gradients are fine, and I believe my colour stops are also correct, I believe it's the positioning that my MIXIN doesn't let me do this (left top, right bottom).

I need this:

.progress.stripes.animate > .bar > span {
  background-image: -webkit-gradient(
  linear, left top, right bottom, 
  color-stop(.25, rgba(255, 255, 255, .2)), 
  color-stop(.25, transparent), 
  color-stop(.5, transparent), 
  color-stop(.5, rgba(255, 255, 255, .2)), 
  color-stop(.75, rgba(255, 255, 255, .2)), 
  color-stop(.75, transparent), to(transparent));
  background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}

To work with this mixin:

@mixin linear-gradient($gradientLine, $colorStops...) {
  background-color: nth($colorStops,1);
  background-image: -webkit-gradient(linear, $gradientLine, $colorStops);
  background-image: -webkit-linear-gradient($gradientLine, $colorStops);
  background-image:    -moz-linear-gradient($gradientLine, $colorStops);
  background-image:      -o-linear-gradient($gradientLine, $colorStops);
  background:             -ms-linear-gradient($gradientLine, $colorStops);
  @if length($colorStops) == 2 {
    $colour1:nth($colorStops,1);
    $colour2:nth($colorStops,2);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$colour1}', endColorstr='#{$colour2}',GradientType=0 );
  }  
  @if length($gradientLine) == 2 {
  background-image:         linear-gradient(to #{inverse-side(nth($gradientLine, 1))} #{inverse-side(nth($gradientLine, 2))}, $colorStops);
  } @else {
  background-image:         linear-gradient(to #{inverse-side($gradientLine)}, $colorStops);
  }
}

This is what I've tried but it doesn't work...

$grad: rgba(255, 255, 255, .2);
.progress.stripes.animate > .bar > span {
  @include linear-gradient((left top, right bottom),$grad 25%, $transparent 25%, $transparent 5%, $grad 5%, $grad 75%, $transparent 75%);
}

Answer 1

Sass is telling you the reason this isn't working in the error message: Function inverse-side finished without @return.

@function inverse-side($side) {
    @if $side == top {
        @return bottom;
    } 
    @else if $side == bottom {
        @return top;
    }
    @else if $side == left {
        @return right;
    }
    @else if $side == right {
        @return left;
    }
}

You're only accounting for 4 conditions here: top, right, bottom, left. There's a 5th option that's being overlooked: none of the above. If there should only be 4 options, then you want 3 if/else blocks and a return value at the very end that's your catch all.

@function inverse-side($side) {
    @if $side == top {
        @return bottom;
    } 
    @else if $side == bottom {
        @return top;
    }
    @else if $side == left {
        @return right;
    }
    @return left;
}