If statement 使用插值的If语句在Sass中的计算结果始终为true

我有一个if/else语句运行在scss中的each函数中

我基本上希望它使文本黑色，如果背景等于白色

@debug指令告诉我我的语句返回正确，但所有按钮都以黑色文本颜色结束悬停？我是不是遗漏了什么

//variables
$brand-primary:             #37a2c6 !default;
$brand-success:             #39c66a !default;
$brand-info:                #5bc0de !default;
$brand-warning:             #f7901e !default;
$brand-danger:              #e42829 !default;
$brand-haze:                #9e50da !default;

$color-white:               #ffffff;
$color-black:               #232323;


//map
$colors: (
  ("danger", $brand-danger, $brand-success), ("warning", $brand-warning, $brand-haze), ("success", $brand-success, $brand-primary), ("primary", $brand-primary, $brand-success), ("haze", $brand-haze, $brand-warning), ("pure", $color-white, $color-black)
);

//function
@each $color in $colors {   

  .btn--hollow {
    background: none !important;
    &.btn-#{nth($color,1)} {
      color: #{nth($color,2)} !important;
      &:hover {
        background: #{nth($color,2)} !important;
        @if #{nth($color,2)} == '#ffffff' {
          color: $color-black !important;
          @debug #{nth($color,2)} == '#ffffff' ;
        } @else {
          color: $color-white !important;
        }

      }
    }
  }

} //end each

---

这里使用插值是将

@if

语句中的表达式转换为字符串。当您编写

@if'somestring'{/*stuff*/}

时，它将始终计算为true

$color: #ffffff;
$foo: #{$color} == '#ffffff';
@debug $foo; // DEBUG: #ffffff == "#ffffff"
@debug type-of($foo); // DEBUG: string

$color: #000000;
$foo: #{$color} == '#ffffff';
@debug $foo; // DEBUG: #000000 == "#ffffff"
@debug type-of($foo); // DEBUG: string

不知道是否有意使用此行为，但这是为什么不应使用插值的众多原因之一，除非您确实需要将变量转换为字符串

$color: #ffffff;
$foo: $color == #ffffff;
@debug $foo; // DEBUG: true
@debug type-of($foo); // DEBUG: bool

$color: #000000;
$foo: $color == #ffffff;
@debug $foo; // DEBUG: false
@debug type-of($foo); // DEBUG: bool