======Директива @if======

 Директива @if принимает выражение SassScript и использует стили, вложенные в неё в случае, если выражение возвращает любое значение, кроме false или null:
<sxh scss>
p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}
</sxh>

компилируется в
<sxh css>
p {
  border: 1px solid; }
</sxh>

После выражения @if может следовать несколько выражений @else if и одно выражение @else. Если выражение @if вернёт false, то будут производиться попытки вычисления выражений @else if, пока одно из них не вернёт истину или до достижения выражения @else. Например:

<sxh scss>
$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
</sxh>
компилируется в
<sxh css>
p {
  color: green; }
</sxh>