SCSS @if() 指令

@if指令後面跟一個表示式，如果此表示式的返回值不是false或者null，那麼就返回指定的樣式。

程式碼例項如下:

[Scss] 純文字檢視 複製程式碼
p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

編譯後的程式碼如下:

[CSS] 純文字檢視 複製程式碼
p {
  border: 1px solid;
}

如其他的很多程式語言類似，@if指令後面還可以跟著多個@else if或者一個@else分支表示式。

程式碼例項如下:

[Scss] 純文字檢視 複製程式碼
$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

編譯後的css程式碼如下:

[CSS] 純文字檢視 複製程式碼
p {
  color: green;
}