Практически ни один язык программирования не обходится без команды if, которая позволяет выполнять код если некоторое заданное условие истинно. Хотя Sass к языкам программирования и не относится, в нём также имеется команда @if, а также @else. Синтаксис следующий.
@if (<условие 1>) {
// команды выполняются, если <условие 1> истинно
}
@else if (<условие 2>) {
// команды выполняются, если <условие 1> ложно, а <условие 2> истинно
}
@else {
// команды выполняются, если все условия выше ложные
}
@else if, а также @else не являются обязательными и если в них нет нужды, просто их не пишем.
Условия допустимо писать как в круглых скобках, так и без них. В условиях используются следующие операторы:
- == равно;
- != не равно;
- > больше;
- < меньше;
- >= больше или равно;
- <= меньше или равно.
Для примера, условие 10 > 5 — истинно, а red == blue — нет.
Условные выражения удобны для задания триггеров — так называется проверка на соответствие некоторым заданным условиям. Например, мы можем ввести переменную $prefix, которая будет сообщать, выводить свойства с браузерными префиксами или нет. Для этого создадим примесь с именем linear-gradient, одним из параметров которой будет значение префикса, и по умолчанию установим значение как true. Теперь при вызове примеси будет идти проверка, выводить вендорные свойства или нет.
@mixin linear-gradient($color1, $color2, $prefix:true) {
@if $prefix {
background-image: -webkit-linear-gradient($color1, $color2);
background-image: -moz-linear-gradient($color1, $color2);
background-image: -o-linear-gradient($color1, $color2);
}
background-image: linear-gradient($color1, $color2);
}
$prefix: false;
body {
@include linear-gradient(#1e5799, #2989d8, $prefix);
}