SASS IF语句中多条件（AND/AND NOT）使用问题排查

你的代码无法生效的核心原因是颜色变量的类型判断不匹配：

• 你定义的$color: red是SCSS内置的颜色类型值，而非字符串
• 但条件中写的$color == "red"是在匹配字符串类型，两者类型不同，判断结果为false，导致整个@if条件不成立

修复方案 #

把颜色判断的引号去掉，直接匹配颜色类型即可，SCSS的逻辑运算符and/not写法本身没问题：

$number: 10;
$color: red;
$theme: light;

.class {
  @if ($number > 5) and ($color == red) and not ($theme == "dark") {
    color: red;
  }
}

编译后结果 #

上述代码编译后会得到你期望的输出：

.class {
  color: red;
}

额外说明 #

如果你的颜色变量是字符串类型（比如$color: "red"），那用$color == "red"才会匹配，但在SCSS中直接使用颜色类型定义颜色变量是更规范的写法。

内容的提问来源于stack exchange，提问作者Mohamad