Директива @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;
}
}