# Директива @if в SASS

Если нам нужно, чтобы определенные стили применялись только при соблюдении конкретных условий, то мы используем директиву `@if`, возвращающую любое значение, за исключением `false` и `null`:

Рассмотрим следующий пример:

`#main-button { @if 2 - 1 == 1 { color: green; } @if (2+3) < 3 { color: orange; } @if null { color: red; } }`

Результат компиляции:

`#main-button { color: green; }`

Также при постановке условия после `@if` можно применять несколько `@else if` и одно выражение `@else`.

`$var: 20px; a { @if $var == 10px { color: blue; } @else if $var == 25px { color: red; } @else if $var == 10px+10px { color: green; } @else { color: black; } }`

Теперь посмотрим в файл `styles.css`:

`a { color: green; }`

Расскажите, каким будет результат компиляции следующего кода:

`$size: 20px; $font-size: 14px; body { @if $size == $font-size { background-color: #7e7ed8; } @else if $size > $font-size { color: #f1bbbb; } @else { color: #000000; } }`

Расскажите, каким будет результат компиляции следующего кода:

`$size: 20px; $font-size: 14px; .active { @if $size < $font-size { color: red; } @else if $size > $font-size { color: green; } @else { color: #000000; } } .not-active { @if $size == $font-size { display:block ; } @else { display: none; } }`
←→
↑