Конструкция if/else – одна из самых распространенных в программировании конструкций, она встречается в большинстве языков программирования. Конечно, Sass не является языком программирования, но и в нем есть эта конструкция.
Условная конструкция if/else работает следующим образом: она оценивает фрагмент кода, определяет, истинно или ложно заданное ей условие, а затем выполняет код, учитывая полученный результат.
В этом руководстве мы поговорим об условной конструкции if/else в Sass.
Она следует такому синтаксису:
@if (<условие 1>) {
// команды выполняются, если условие 1 истинно
}
@else if (<условие 2>) {
// команды выполняются, если условие 2 истинно, а условие 1 ложно
}
@else {
// команды выполняются, если все условия оказались ложными
}
Оператор if позволяет проверить, существует ли искомая переменная. Рассмотрим такой пример:
$var: true !default; // можно обойти в другом месте
@if $var == true {
// код условного выражения
}
$other: single;
@if $other == single {
// Code for if it’s single
} @else if $other == double {
// Double code
} @else {
// Default if it’s neither
}
Если свойства ваших переменных хранятся в кавычках, ваш оператор @if должен проверить и это (это записывается как $other ==‘single’).
Операторы if полезны в миксинах (для проверки переменных) или в библиотеках (для включения или исключения кода).
Читайте также: Как работают переменные в Sass