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

• <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

// 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

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

@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; // 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
@use 'sass:math'

@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.

// 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;
}