1

我只是拉我的头发知道。

我有一个接收一个简单对象的混合。根据属性之一的值，应在 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% "));
}
4

2 回答 2

0

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

- @if #{map-get($obj, value)} {
+ @if map-get($obj, value) {
于 2019-10-02T18:07:08.170 回答
0

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

// ----
// 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% "));
}
于 2019-09-16T14:20:30.140 回答