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

if语句 CSS

泡芙逆天

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)}
}

是否可以有多个条件？

第2157篇《在SASS IF语句中使用多个条件（AND）》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
宝儿小小 2020.03.18

从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

您也可以这样做：

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

但是要当心：

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android