SCSS-检查字体系列的变量

我需要检查我的

$primary\u font\u系列

变量是否包含特定的字体系列

我的问题是，这是检查变量中字体系列的正确方法吗？我很好奇单引号等是否会导致问题

即使

$primary\u font\u family

为空，当前仍返回红色背景。我的scss编译器没有返回任何错误，但正如我在测试期间所知道的，该变量为空，并且仍然使用红色背景编译

代码和条件：

$primary_font_family: 'Whitney-Bold', sans-serif;

@if ($primary_font_family == 'Whitney-Bold', sans-serif) {
  .primary-header__brand-wrap {
    background-color: red !important;
  }
}

测试：

如您所见，第二个

$primary\u font\u family

检查查找一个值

Whitney Example

，该值甚至不存在，但仍然可以编译

---

如果

（

和

）

，您可以将

@上的字体包围起来：

演示：

如果其中一个变量与指定的值匹配，您也可以查找不同的变量：

$a: 'Whitney-Bold', sans-serif;
$b: 'Whitney-Bold', sans-serif;
$c: 'Whitney-Example', sans-serif;

//a or b or c = specified value
@if (index(($a, $b, $c), ('Whitney-Bold', sans-serif)) != null) {
  .test {
    color: red;
  }
}

$a: 'Whitney-Bold', sans-serif;
$b: 'Whitney-Bold', sans-serif;
$c: 'Whitney-Example', sans-serif;

//a or b or c = specified value
@if (index(($a, $b, $c), ('Whitney-Bold', sans-serif)) != null) {
  .test {
    color: red;
  }
}