Sass logic not being applied if contained in mixin, but applied from function

60 Views Asked by At

I have two sets of Sass logic that should do the same thing, but the results are distinctly different.

Can anyone explain to me why the conditional logic contained within the mixin was not applied to the results, but the same logic abstracted into a function was?

Both versions were invoked with:

@include maximizable-dialog($max-width: 650px);

The default values are:

$default-height: 550px;
$default-width:  960px;

Version 1: Mixin

@mixin maximizable-dialog($min-width: $default-width, $min-height: $default-height, $max-width: none, $max-height: none) {

    // if the minimum is too large, revert to defaults
    @if ($min-width > $default-width) {
        $min-width: $default-width;
    }

    // reduce the minimum if it is larger than the maximum
    @if not ($max-width == none) {
        @if $max-width < $default-width {
            @if ($max-width < $min-width) {
                $min-width: $max-width;
            }
        }
    }

    // if the minimum is too large, revert to defaults
    @if ($min-height > $default-height) {
        $min-height: $default-height;
    }

    // reduce the minimum if it is larger than the maximum
    @if not ($max-height == none) {
        @if ($max-height < $default-height) {
            @if ($max-height < $min-height) {
                $min-height: $max-height;
            }
        }
    }

    min-height: $min-height;
    max-height: $max-height;
    min-width: $min-width;
    max-width: $max-width;
}

Compiles to:

min-height: 550px;
max-height: none;
min-width: 960px; // larger than expected
max-width: 650px;

Version 2: Mixin & Function

@function maximizable-dialog-min-value($min, $max, $default) {
    // if the minimum is too large, revert to defaults
    @if ($min > $default) {
        $min: $default;
    }

    // reduce the minimum if it is larger than the maximum
    @if not ($max == none) {
        @if ($max < $default) {
            @if ($max < $min) {
                $min: $max;
            }
        }
    }

    @return $min;
}

@mixin maximizable-dialog($min-width: $default-width, $min-height: $default-height, $max-width: none, $max-height: none) {
    min-height: maximizable-dialog-min-value($min-height, $max-height, $default-height);
    max-height: $max-height;
    min-width: maximizable-dialog-min-value($min-width, $max-width, $default-width);
    max-width: $max-width;
}

Compiles to:

min-height: 550px;
max-height: none;
min-width: 650px; // exactly what's expected
max-width: 650px;
0

There are 0 best solutions below