Условные выражения

Практически ни один язык программирования не обходится без команды 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);
}

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 18.05.2016
Редакторы: Влад Мержевич