Конструкция if/else в Sass

Development | Amber | Комментировать запись

Конструкция 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