Директива @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;
}
Ваша
Поддержка
Поддержка