SCSS 比較運算子

與JavaScript類似，scss中也有比較運算子，下面就分別做一下介紹。

一.==相等和!=不相等運算子:

此運算子用來判斷兩個運算元是否相等。

[Scss] 純文字檢視 複製程式碼
@mixin font-fl($font){
  &:after {
    @if(type-of($font) == string) {
      content: 'My font is: #{$font}.';
    } 
    @else {
      content: 'Sorry, the argument #{$font} is a #{type-of($font)}.';
    }
  }
}
 
h2{
  @include font-fl(sans-serif);
}

編譯為css程式碼如下:

[CSS] 純文字檢視 複製程式碼
h2:after {
  content: 'My font is: sans-serif.';
}

相關閱讀:

（1）.&可以參閱scss &父選擇器識別符號一章節。

（2）.@if可以參閱scss @if()指令一章節。

!=運算子同樣的道理，只不過作用不同而已。

特別說明:

上面兩個運算子，支援類似於JavaScript嚴格型別比較(===)。

看如下程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
/*false*/
("5" == 5)
/*true (Libsass不支援)*/
(20px == 20)

二.其他比較運算子:

>、>=、<和<=這幾個運算子比較相近，一個程式碼例項足以表明它的使用方式:

[Scss] 純文字檢視 複製程式碼
$padding: 50px;
 
h2 {
  @if($padding <= 20px) {
    padding: $padding;
  } @else {
    padding: $padding / 2;
  }
}