SASS 映射属性未输入 IF else 语句答案

【问题标题】：SASS mapped property doesn't enter in IF else statementSASS 映射属性未输入 IF else 语句
【发布时间】：2020-01-17 06:41:37
【问题描述】：

我只是拉扯我的头发知道。

我有一个接收简单对象的混合。根据属性之一的值，应在 de IF 语句中输入或 ELSE 之一。然而，它总是评估为 TRUE 并且无法弄清楚为什么。

代码是使用 node-sass (libsass v3.5.4) 编译的，要点可以在这里看到：

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

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

【问题讨论】：

标签： sass libsass sass-maps

【解决方案1】：

不知道为什么，但是，如果我将对象属性的值分配给变量，它就可以解决问题。同样，不知道为什么，但它现在可以工作了：

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

【讨论】：

【解决方案2】：

您将地图中的值插入到字符串中，因此您实际上是在检查字符串"false"，这是真的（正如您已经发现的那样）。摆脱插值#{...}，它应该可以按预期工作。

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

【讨论】：