我有两套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;