Числа

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

@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

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

Единицы 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;
}

Точность permalinkТочность

Совместимость (10 Digit Default):

Dart Sass

✓

LibSass

✗

Ruby Sass

since 3.5.0

▶

Числа Sass поддерживают до 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

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