Числа

@debug 100; // 100
@debug 0.8; // 0.8
@debug 16px; // 16px
@debug 5px * 2px; // 10px*px (read "square pixels")

// SASS
@debug 100  // 100
@debug 0.8  // 0.8
@debug 16px  // 16px
@debug 5px * 2px  // 10px*px (read "square pixels")

Числа Sass поддерживают те же форматы, что и числа CSS, включая научную нотацию, которая записывается с помощью e между числом и его степенью 10. Поскольку поддержка научной нотации в браузерах исторически была нестабильной, Sass всегда компилирует её в полностью развернутые числа.

@debug 5.2e3; // 5200
@debug 6e-2; // 0.06

// SASS
@debug 5.2e3  // 5200
@debug 6e-2  // 0.06

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

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

Точность

Совместимость (точность по умолчанию — 10 цифр):

Dart Sass

✓

LibSass

✗

Ruby Sass

начиная с 3.5.0

➤

Числа Sass внутри представлены значениями с плавающей точкой двойной точности (64 бита). При сериализации в CSS и при проверке на равенство они поддерживают точность до 10 цифр после десятичной точки. Это означает несколько вещей:

• В сгенерированный CSS попадут только первые десять цифр числа после десятичной точки.

• Такие операции, как == и >=, считают два числа равными, если их значения совпадают до десятой цифры после десятичной точки.

• Если число отличается от целого менее чем на 0.0000000001, оно считается целым для функций, таких как list.nth(), которым требуются целочисленные аргументы.

@debug 0.012345678912345; // 0.0123456789
@debug 0.01234567891 == 0.01234567899; // true
@debug 1.00000000009; // 1
@debug 0.99999999991; // 1

// SASS
@debug 0.012345678912345  // 0.0123456789
@debug 0.01234567891 == 0.01234567899  // true
@debug 1.00000000009  // 1
@debug 0.99999999991  // 1