4.4.0 add function compilation is wrong
Created by: 719media
The bootstrap 4.4 add function doesn't quite work right with sass compilation.
As an example, paste the following
@function add($value1, $value2, $return-calc: true) {
@if $value1 == null {
@return $value2;
}
@if $value2 == null {
@return $value1;
}
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
@return $value1 + $value2;
}
@return if($return-calc == true, calc(#{$value1} + #{$value2}), #{$value1} + #{$value2});
}
$line-height-base: 1.5 !default;
$input-btn-padding-y: .375rem !default;
$border-width: 1px !default;
$test-height: add($line-height-base * 1em, add($input-btn-padding-y * 2, $border-width, false)) !default;
.test-height {
height: $test-height;
}
into https://www.sassmeister.com/
You'll notice that the compiled css has some wonkiness:
.test-height {
height: calc(1.5em + 0.75rem1px);
}
One option is to interpolate the plus sign in the function, like so:
@return if($return-calc == true, calc(#{$value1} + #{$value2}), #{$value1 '+' $value2});