SCSS 邏輯運算子

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

程式碼比較簡單，不做更多介紹。