Операторы

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

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

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

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

Порядок выполнения операций

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

Унарные операторы not, +, - и /.
Операторы *, / и %.
Операторы + и -.
Операторы >, >=, < и <=.
Операторы == и !=.
Оператор and.
Оператор or.
Оператор =, когда он доступен.

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

Скобки

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

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

Один знак равенства

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

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

© 2006–2025 the Sass team, and numerous contributors
Licensed under the MIT License.
https://sass-lang.com/documentation/operators