Числа

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

Точность

Совместимость (по умолчанию 10 знаков после запятой):

Dart Sass

✓

LibSass

✗

Ruby Sass

с версии 3.5.0

➤

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

• В сгенерированном 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