css - 如果包含在 mixin 中，则不会应用 Sass 逻辑，而是从函数中应用

Question

我有两组 Sass 逻辑应该做同样的事情，但结果明显不同。

谁能向我解释为什么 mixin 中包含的条件逻辑没有应用于结果，但抽象成函数的相同逻辑是？

两个版本都被调用：

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

默认值为：

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

版本 1：混合

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

编译为：

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

版本 2：混合和函数

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

编译为：

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