Операторы

Sass поддерживает несколько полезных операторов operators для работы с разными значениями. К ним относятся стандартные математические операторы, такие как + и *, а также операторы для различных других типов:

  • == и != используются для проверки совпадения двух значений.
  • +, -, *, / и % имеют обычное математическое значение для чисел, со специальным поведением для единиц, которое соответствует использованию единиц в научной математике.
  • <, <=, > и >= проверяет, больше или меньше два числа друг друга.
  • and, or и not имеют обычное логическое поведение. Sass считает все значения «истинными», кроме false и null.
  • +, - и / можно использовать для объединения строк.

⚠️ Внимание!

В начале истории Sass он добавил поддержку математических операций с цветами. Эти операции работали с каждым из каналов RGB каждого цвета отдельно, поэтому добавление двух цветов приведет к получению цвета с суммой их красных каналов в качестве красного канала и так далее.

Это поведение было не очень полезным, поскольку его поканальная арифметика RGB не соответствовала тому, как люди воспринимают цвет. Цветовые функции были добавлены, которые намного более полезны, а цветовые операции устарели. Они по-прежнему поддерживаются в LibSass и Ruby Sass, но выдают предупреждения, и пользователям настоятельно рекомендуется их избегать.

Порядок операций permalinkПорядок операций

Sass имеет довольно стандартный порядок операций, от самого жесткого до самого слабого:

  1. Унарные операторы not, +, - и /.
  2. Операторы *, / и %.
  3. Операторы + and -.
  4. Операторы >, >=, < и <=.
  5. Операторы == и !=.
  6. Оператор and.
  7. Оператор or.
  8. Оператор =, если он доступен.

SCSS Syntax

@debug 1 + 2 * 3 == 1 + (2 * 3); // true
@debug true or false and false == true or (false and false); // true

Круглые скобки permalinkКруглые скобки

Вы можете явно управлять порядком операций, используя круглые скобки. Операция в круглых скобках всегда оценивается перед любыми операциями вне скобок. Скобки могут быть даже вложенными, и в этом случае в первую очередь будут оцениваться самые внутренние круглые скобки.

SCSS Syntax

@debug (1 + 2) * 3; // 9
@debug ((1 + 2) * 3 + 4) * 5; // 65

Одиночные равные permalinkОдиночные равные

Sass поддерживает специальный оператор =, который разрешен только в аргументах функции, который просто создает строку без кавычек с двумя операндами, разделенными символом =. Это существует для обратной совместимости с очень старым синтаксисом, предназначенным только для IE.

SCSS Syntax

.transparent-blue {
  filter: chroma(color=#0000ff);
}