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 belie

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;
}