if-statement - 在 Sass 中使用插值的 If 语句总是计算为真

Question

我在 scss 的每个函数中运行了一个 if/else 语句。

我基本上希望它在背景为白色时将文本设为黑色

@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

Answer 1

此处插值的使用是将 @if 语句中的表达式转换为字符串。当您编写 @if 'somestring' {/* stuff */} 时，它的计算结果总是为真。

$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