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 中编写复杂条件语句时，正确使用括号来控制运算符优先级的重要性，从而避免潜在的逻辑错误。
