SCSS 逻辑运算符

2019-2-15 11:33| 作者: admin| 查看: 25| 评论: 0|来自: 凯博

SCSS包含三个逻辑运算符,分别如下

(1).逻辑与运算符:and。

(2).逻辑或运算符:or。

(3).逻辑非运算符:not。

一.逻辑与运算符:

and逻辑与运算符的计算结果分为如下几种情况:

(1).如果第一个操作数的返回值不为null或者false,那么就返回第二个操作数的返回值。

(2).如果第一个操作数的返回值是null或者false,那么就返回这个null或者false。

代码实例:

[Scss] 纯文本查看 复制代码
$num:5;
p {
  @if ($num>0 and $num<6)  { border: 1px solid;  }
}

编译后的css代码如下:

[CSS] 纯文本查看 复制代码
p {
  border: 1px solid; 
}

二.逻辑或运算符:

or逻辑与运算符的计算结果分为如下几种情况:

(1).如果第一个操作数的返回值不为null或者false,那么就返回这个操作数的返回值。

(2).如果第一个操作数的返回值为null或者false,那么就返回第二个操作数的返回值。

代码实例:

[Scss] 纯文本查看 复制代码
$num:5;
$x:1;
p {
  @if ($num>5 or $x<2) { border: 1px solid;  }
}

编译成css代码如下:

[CSS] 纯文本查看 复制代码
p {
  border: 1px solid; 
}

二.逻辑非运算符:

not逻辑与运算符的计算结果分为如下几种情况:

(1).如果操作数的返回值不为null或者false,那么返回false。

(2).如果操作数的返回值是null或者false,那么返回true。

代码实例:

[CSS] 纯文本查看 复制代码
$num:null;
p {
  @if (not $num) { border: 1px solid;  }
}

编译生成css代码如下:

[CSS] 纯文本查看 复制代码
p {
  border: 1px solid; 
}

代码比较简单,不做更多介绍。

上一篇:SCSS list 列表

最新评论

返回顶部