css - SCSS - 检查字体系列的变量

Question

我需要检查我的 $primary_font_family 变量是否包含特定的字体系列。

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

即使 $primary_font_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_font_family 检查查找一个值 Whitney-Example，它甚至不存在，但它仍然可以编译。

Answer 1

可以把@if上的字体包围起来使用 ( 和 ):

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

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

演示: https://jsfiddle.net/ow5cLsxy/7/

---

您还可以查找不同的变量是否其中之一与指定值匹配:

$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;
  }
}