I have two sets of Sass logic that should do the same thing, but the results are distinctly different.
Can anyone explain to me why the conditional logic contained within the mixin was not applied to the results, but the same logic abstracted into a function was?
Both versions were invoked with:
@include maximizable-dialog($max-width: 650px);
The default values are:
$default-height: 550px;
$default-width: 960px;
Version 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;
}
Compiles to:
min-height: 550px;
max-height: none;
min-width: 960px; // larger than expected
max-width: 650px;
Version 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;
}
Compiles to:
min-height: 550px;
max-height: none;
min-width: 650px; // exactly what's expected
max-width: 650px;