如果包含在mixin中,则不应用Sass逻辑,但应用于函数

时间:2018-01-11 21:40:23

标签: css visual-studio-2015 sass web-compiler

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

有人可以向我解释为什么mixin中包含的条件逻辑没有应用于结果,但是抽象到函数中的相同逻辑是什么?

两个版本都使用:

调用
@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&amp;功能

@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 个答案:

没有答案