SASS映射属性没有'；不要输入IF-else语句

我只是在开玩笑，你知道的

我有一个接收简单物体的混音器。根据其中一个属性的值，应在de IF语句或ELSE语句中输入。 然而，它总是被认为是真实的，并且不知道为什么

代码是使用节点sass（libsass v3.5.4）编译的，其要点如下所示：

两次调用CalculateHight mixin都会将if求值为TRUE，并创建一个具有两次颜色：红色的CSS，而不是颜色：红色和颜色：蓝色的

// ----
// 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% "));
}

---

不知道为什么，但是，如果我将object属性的值赋给一个变量，它就会起作用。同样，不知道为什么，但它现在起作用了：

// ----
// 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% "));
}

---

不知道为什么，但是，如果我将object属性的值赋给一个变量，它就会起作用。同样，不知道为什么，但它现在起作用了：

// ----
// 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% "));
}

---

您正在将地图中的值插值到字符串中，因此实际上您正在检查字符串

“false”

，这是真实的（正如您已经发现的）。去掉插值

#{…}

，它应该能按预期工作

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

---

您正在将地图中的值插值到字符串中，因此实际上您正在检查字符串

“false”

，这是真实的（正如您已经发现的）。去掉插值

#{…}

，它应该能按预期工作

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