Sass @if 条件语句中的逻辑运算符优先级问题

在使用 Sass 的 @if 指令进行条件判断时，尤其是在结合选择器和逻辑运算符 && 时，容易出现优先级导致的判断错误。本文将分析一个常见问题，并提供解决方案。

问题：&& 运算符优先级导致的判断错误

以下 Sass 代码意图判断 typeset 是否为 "card" 且 exercise-type 是否为 "choice"，并根据结果设置不同的字号：

<code class="sass">@if(&[typeset="card"]&&[exercise-type="choice"])
  >span
    font-size: 12px !important
@else
  >span
    font-size: 14px !important</code>

然而，这段代码的判断结果总是 font-size: 12px !important，即使 exercise-type 不为 "choice"。

原因：运算符优先级

问题在于 Sass 中 && 运算符的优先级低于 [] 选择器。 Sass 解释器会先处理 [] 选择器，然后才进行 && 运算。 因此，上面的代码实际上等价于：

<code class="sass">@if((&[typeset="card"]) && ([exercise-type="choice"]))
  // ...</code>

&[typeset="card"] 本身就是一个选择器，它总是会匹配到某些元素，因此返回真值。 && 运算符与一个真值进行运算，无论 [exercise-type="choice"] 的结果如何，整个表达式都将为真。

解决方案：使用括号调整优先级

为了正确地进行逻辑判断，需要使用括号来明确运算顺序，确保 && 运算在 [] 选择器之后执行：

<code class="sass">@if(( &[typeset="card"] ) && ( &[exercise-type="Choice"] ))
  >span
    font-size: 12px !important
@else
  >span
    font-size: 14px !important</code>

通过添加括号，我们强制 Sass 解释器先进行 &[typeset="card"] 和 &[exercise-type="Choice"] 的选择器匹配，然后才进行 && 运算，从而得到预期的结果。 注意，这里将 choice 大写为 Choice，确保与实际属性值一致，避免因大小写不敏感而导致的错误。

通过这个例子，我们可以了解到在 Sass 中编写复杂条件语句时，正确使用括号来控制运算符优先级的重要性，从而避免潜在的逻辑错误。