Числовые операторы

• <expression> + <expression> прибавляет значение первого выражения ко второму.
• <expression> - <expression> вычитает значение первого выражения из второго.
• <expression> * <expression> умножает значение первого выражения на второе.
• <expression> % <expression> возвращает остаток от деления значения первого выражения на второе. Этот оператор называется оператором по модулю.

@debug 10s + 15s; // 25s
@debug 1in - 10px; // 0.8958333333in
@debug 5px * 3px; // 15px*px
@debug 1in % 9px; // 0.0625in

// SASS
@debug 10s + 15s  // 25s
@debug 1in - 10px  // 0.8958333333in
@debug 5px * 3px  // 15px*px
@debug 1in % 9px  // 0.0625in

Числа без единиц измерения можно использовать с числами с любой единицей измерения.

@debug 100px + 50; // 150px
@debug 4s * 10; // 40s

// SASS
@debug 100px + 50  // 150px
@debug 4s * 10  // 40s

Числа с несовместимыми единицами измерения нельзя использовать при сложении, вычитании или вычислении остатка от деления.

@debug 100px + 10s;
//     ^^^^^^^^^^^
// Error: Incompatible units px and s.

// SASS
@debug 100px + 10s
//     ^^^^^^^^^^^
// Error: Incompatible units px and s.

Унарные операторы

Операторы + и - также можно записывать как унарные операторы, принимающие только одно значение:

• +<expression> возвращает значение выражения без изменений.
• -<expression> возвращает значение выражения с противоположным знаком.

@debug +(5s + 7s); // 12s
@debug -(50px + 30px); // -80px
@debug -(10px - 15px); // 5px

// SASS
@debug +(5s + 7s)  // 12s
@debug -(50px + 30px)  // -80px
@debug -(10px - 15px)  // 5px

@debug a-1; // a-1
@debug 5px-3px; // 2px
@debug 5-3; // 2
@debug 1 -2 3; // 1 -2 3

$number: 2;
@debug 1 -$number 3; // -1 3
@debug 1 (-$number) 3; // 1 -2 3

// SASS
@debug a-1  // a-1
@debug 5px-3px  // 2px
@debug 5-3  // 2
@debug 1 -2 3  // 1 -2 3

$number: 2
@debug 1 -$number 3  // -1 3
@debug 1 (-$number) 3  // 1 -2 3

Деление

Совместимость (math.div()):

Dart Sass

с версии 1.33.0

LibSass

✗

Ruby Sass

✗

В отличие от других математических операций, для деления в Sass используется функция math.div(). Хотя во многих языках программирования / используется как оператор деления, в CSS / служит разделителем (например, в font: 15px/32px или hsl(120 100% 50% / 0.8)). Sass поддерживает использование / в качестве оператора деления, однако эта возможность устарела и будет удалена в одной из будущих версий.

Значения, разделённые косой чертой

Пока Sass всё ещё поддерживает / в качестве оператора деления, необходимо различать / как разделитель и / как знак деления. Чтобы это работало, если два числа разделены /, Sass выведет результат через косую черту, а не выполнит деление, если не соблюдается одно из следующих условий:

• Хотя бы одно из выражений не является числовым литералом.
• Результат сохраняется в переменной или возвращается функцией.
• Операция заключена в скобки, за исключением случая, когда эти скобки охватывают список, содержащий операцию.
• Результат используется как часть другой операции (кроме /).
• Результат возвращается вычислением.

Можно использовать list.slash(), чтобы принудительно использовать / в качестве разделителя.

@use "sass:list";

@debug 15px / 30px; // 15px/30px
@debug (10px + 5px) / 30px; // 0.5
@debug list.slash(10px + 5px, 30px); // 15px/30px

$result: 15px / 30px;
@debug $result; // 0.5

@function fifteen-divided-by-thirty() {
  @return 15px / 30px;
}
@debug fifteen-divided-by-thirty(); // 0.5

@debug (15px/30px); // 0.5
@debug (bold 15px/30px sans-serif); // bold 15px/30px sans-serif
@debug 15px/30px + 1; // 1.5

// SASS
@use "sass:list";

@debug 15px / 30px  // 15px/30px
@debug (10px + 5px) / 30px  // 0.5
@debug list.slash(10px + 5px, 30px)  // 15px/30px

$result: 15px / 30px
@debug $result  // 0.5

@function fifteen-divided-by-thirty()
  @return 15px / 30px

@debug fifteen-divided-by-thirty()  // 0.5

@debug (15px/30px)  // 0.5
@debug (bold 15px/30px sans-serif)  // bold 15px/30px sans-serif
@debug 15px/30px + 1  // 1.5

Единицы измерения

Sass предоставляет широкие возможности для работы с единицами измерения, основанные на принципах вычислений с единицами измерения в реальном мире. При умножении двух чисел перемножаются и их единицы измерения. При делении одного числа на другое единицы измерения в числителе результата берутся из первого числа, а в знаменателе — из второго. Число может иметь любое количество единиц измерения в числителе и/или знаменателе.

@use 'sass:math';

@debug 4px * 6px; // calc(24px * 1px) (read "square pixels")
@debug math.div(5px, 2s); // calc(2.5px / 1s) (read "pixels per second")

// calc(3.125px * 1deg / 1s / 1em) (read "pixel-degrees per second-em")
@debug 5px * math.div(math.div(30deg, 2s), 24em);

$degrees-per-second: math.div(20deg, 1s);
@debug $degrees-per-second; // calc(20deg / 1s)
@debug math.div(1, $degrees-per-second); // calc(0.05s / 1deg)

// SASS
@use 'sass:math'

@debug 4px * 6px  // calc(24px * 1px) (read "square pixels")
@debug math.div(5px, 2s)  // calc(2.5px / 1s) (read "pixels per second")

// calc(3.125px * 1deg / 1s / 1em) (read "pixel-degrees per second-em")
@debug 5px * math.div(math.div(30deg, 2s), 24em)

$degrees-per-second: math.div(20deg, 1s)
@debug $degrees-per-second  // calc(20deg / 1s)
@debug math.div(1, $degrees-per-second)  // calc(0.05s / 1deg)

Sass автоматически преобразует совместимые единицы измерения, однако выбор единицы измерения для результата зависит от используемой реализации Sass. Если попытаться объединить несовместимые единицы измерения, например 1in + 1em, Sass выдаст ошибку.

// CSS defines one inch as 96 pixels.
@debug 1in + 6px; // 102px or 1.0625in

@debug 1in + 1s;
//     ^^^^^^^^
// Error: Incompatible units s and in.

// SASS
// CSS defines one inch as 96 pixels.
@debug 1in + 6px  // 102px or 1.0625in

@debug 1in + 1s
//     ^^^^^^^^
// Error: Incompatible units s and in.

Как и при вычислениях с единицами измерения в реальном мире, если единицы измерения в числителе совместимы с единицами в знаменателе (например, math.div(96px, 1in)), они сокращаются. Это позволяет легко задать коэффициент для преобразования единиц измерения. В примере ниже мы задаём требуемую скорость — одна секунда на 50 пикселей — и умножаем её на количество пикселей, которое охватывает переход, чтобы получить его длительность.

@use 'sass:math';

$transition-speed: math.div(1s, 50px);

@mixin move($left-start, $left-stop) {
  position: absolute;
  left: $left-start;
  transition: left ($left-stop - $left-start) * $transition-speed;

  &:hover {
    left: $left-stop;
  }
}

.slider {
  @include move(10px, 120px);
}

// SASS
@use 'sass:math'

$transition-speed: math.div(1s, 50px)

@mixin move($left-start, $left-stop)
  position: absolute
  left: $left-start
  transition: left ($left-stop - $left-start) * $transition-speed

  &:hover
    left: $left-stop



.slider
  @include move(10px, 120px)

/* CSS */
.slider {
  position: absolute;
  left: 10px;
  transition: left 2.2s;
}
.slider:hover {
  left: 120px;
}