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

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

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

@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

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

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

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

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

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

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

• +<expression> возвращает значение выражения, не изменяя его.
• -<expression> возвращает отрицательную версию значения выражения.

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

@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

@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

Деление permalinkДеление

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

Dart Sass

since 1.33.0

LibSass

✗

Ruby Sass

✗

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

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

На данный момент, хотя 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

@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

Единицы permalinkЕдиницы

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

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

// 3.125px*deg/s*em (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; // 20deg/s
@debug math.div(1, $degrees-per-second); // 0.05s/deg

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

// 3.125px*deg/s*em (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  // 20deg/s
@debug math.div(1, $degrees-per-second)  // 0.05s/deg

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.

// 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 пикселей, а затем умножаем ее на количество пикселей, охватываемых переходом, чтобы получить необходимое время.

$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);
}

$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)

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