SASS mapped property doesn't enter in IF else statement

Question

I'm just pulling my hair right know.

I have a mixing that receives a simple object. Depending on the value of one of the properties should enter inside de IF statement or the ELSE one. However it's always evaluating as TRUE and can't figure why.

Code is compiled using node-sass (libsass v3.5.4 ) and the gist can be seen here:

https://www.sassmeister.com/gist/40eb28fd55173d7534a7162de3c1b960

Both times calculateHeight mixin is invoked evaluates the if to TRUE and creates a CSS with twice color: red, instead of color: red and color: blue

// ----
// libsass (v3.5.4)
// ----

$headerHeight: 150px;
$headerHeightM: 115px;
$headerHeightS: 100px;

@mixin calculateHeight($obj:()){    

    @if #{map-get($obj, value)} {       
        color: red;
        @media (min-width: 480px) {     
            #{map-get($obj, property)}: $headerHeightS;
        }
        @media (min-width: 768px) {     
            #{map-get($obj, property)}: $headerHeightM;
        }
        @media (min-width: 1280px) {                
            #{map-get($obj, property)}: $headerHeight;  
        }
    }

    @else {

        color: blue;
        @media (min-width: 480px) {     
            #{map-get($obj, property)}: #{map-get($obj, value)} 233px;
        }
    }

}
.header{
  @include calculateHeight((property: 'height', value: false));
  @include calculateHeight((property: "background", value: "url('../img/red_header_wave_1.png') no-repeat center top/100% "));
}

score 0 · Answer 1 · answered Sep 16 '19 at 14:20

Not sure why, but, if I assign the value of the object property to a variable it does the trick and works. Again, not sure why but it's working now:

// ----
// libsass (v3.5.4)
// ----

$headerHeight: 150px;
$headerHeightM: 115px;
$headerHeightS: 100px;

@mixin calculateHeight($obj:()){    

// Assign the mapped property to a variable prior to @if
$var: #{map-get($obj, value)};
    @if $var == 'false' {       
        color: red;
        @media (min-width: 480px) {     
            #{map-get($obj, property)}: $headerHeightS;
        }
        @media (min-width: 768px) {     
            #{map-get($obj, property)}: $headerHeightM;
        }
        @media (min-width: 1280px) {                
            #{map-get($obj, property)}: $headerHeight;  
        }
    }

    @else {

        color: blue;
        @media (min-width: 480px) {     
            #{map-get($obj, property)}: #{map-get($obj, value)} 233px;
        }
    }

}
.header{
  @include calculateHeight((property: 'height', value: false));
  @include calculateHeight((property: "background", value: "url('../img/red_header_wave_1.png') no-repeat center top/100% "));
}

score 0 · Answer 2 · answered Oct 02 '19 at 18:07

You are interpolating the value from your map into a string, so you are actually checking the string "false", which is truthy (as you already found out). Get rid of the interpolation #{...} and it should work as expected.

- @if #{map-get($obj, value)} {
+ @if map-get($obj, value) {

SASS mapped property doesn't enter in IF else statement

2 Answers2