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;