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

如果使用插值的语句总是在Sass中求值为true

1 个答案: