Директива @if

Директива @if принимает выражение SassScript и использует стили, вложенные в неё в случае, если выражение возвращает любое значение, кроме false или null:

scss
p {
  @if 1 + 1 == 2 { 
    border: 1px solid;  
  }
  @if 5 < 3 { 
    border: 2px dotted;
  }
  @if null { 
    border: 3px double; 
  }
}
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. Если выражение @if вернёт false, то будут производиться попытки вычисления выражений @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;
  }
}
$type: monster
p
  @if $type == ocean
    color: blue
  @else if $type == matador
    color: red
  @else if $type == monster
    color: green
  @else
    color: black
css
p {
  color: green; 
}

Ваша 
Поддержка