Question

我只是知道我的头发。

我有一个接收简单对象的混合。根据属性之一的值，应在IF语句或ELSE一个内部输入。但是，它始终将评估为TRUE，无法弄清原因。

代码是使用node-sass（libsass v3.5.4）编译的，其要旨如下：

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

两次调用calculateHeight mixin都会将if评估为TRUE，并创建一个 CSS，该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% "));
}

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

Answer 2

您正在将映射中的值内插到字符串中，因此实际上是在检查字符串"false"，这是正确的（如您所知）。摆脱插值#{...}，它应能按预期工作。

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

SASS映射的属性未在if else语句中输入

2 个答案: