Sass логика не применяется, если содержится в mixin, но применяется из функции

У меня есть два набора логики Sass, которые должны делать то же самое, но результаты совершенно разные.

Может ли кто-нибудь объяснить мне, почему условная логика, содержащаяся в миксине, не была применена к результатам, а та же логика, абстрагированная в функцию?

Обе версии были вызваны с:

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

Значения по умолчанию:

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

Версия 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;
}

Компилируется в:

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

Версия 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;
}

Компилируется в:

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

0 ответов

Другие вопросы по тегам