在SASS IF语句中使用多个条件（AND）

泡芙逆天2020-03-18

使用SASS，我想在IF语句中有多个条件

我现在使用的是：

@function color-x ($alpha) {
    @if      $accent == red   {@return red($alpha)} 
    @else if $accent == green {@return green($alpha)} 
    @else if $accent == blue  {@return blue($alpha)}
}

我的幼稚（失败）尝试使用多个条件：

@function color-x ($alpha) {
    @if      $accent == red   && theme == light {@return red($alpha)} 
    @else if $accent == green && theme == light {@return green($alpha)} 
    @else if $accent == blue  && theme == light {@return blue($alpha)}
}

是否可以有多个条件？

宝儿小小2020/03/18 18:33:32

从Sass语言参考文档中：

布尔运算

SassScript支持and，or和not运营商布尔值。

（链接）

因此，具有复合条件的if语句表达式将如下所示：

@if $var1 == value1 and $var2 == value2 {
    // ...
}

此外，括号可用于影响更复杂的表达式中的运算顺序：

@if ($var1 == value1 and not ($var2 == value2)) or ($var3 == value3) {
    // ...
}

阳光猪猪2020/03/18 18:33:32

您也可以这样做：

@if index("foo" "bar", $value) { .. }

但是要当心：

您尝试执行的操作可能不太明显。
它返回数字或null，而不是布尔值。

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer