Spec-Zone.ru › Sass

sass:math

Совместимость:
Dart Sass
с версии 1.23.0
LibSass
✗
Ruby Sass
✗
➤

В настоящее время только Dart Sass поддерживает загрузку встроенных модулей с @use. Пользователи других реализаций должны вызывать функции, используя их глобальные имена вместо этого.

Переменные 

math.$e
Совместимость:
Dart Sass
с версии 1.25.0
LibSass
✗
Ruby Sass
✗

Самое близкое 64-битное приближение с плавающей точкой математической константы e.

@use 'sass:math';

@debug math.$e; // 2.7182818285
// SASS
@use 'sass:math'

@debug math.$e  // 2.7182818285
math.$epsilon
Совместимость:
Dart Sass
с версии 1.55.0
LibSass
✗
Ruby Sass
✗

Разница между 1 и наименьшим 64-битным числом с плавающей точкой, большим 1, согласно сравнениям с плавающей точкой. Из-за точности чисел Sass (10 знаков), во многих случаях это будет казаться 0.

math.$max-number
Совместимость:
Dart Sass
с версии 1.55.0
LibSass
✗
Ruby Sass
✗

Максимальное конечное число, которое может быть представлено как 64-битное число с плавающей точкой.

@use 'sass:math';

@debug math.$max-number; // 179769313486231570000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
// SASS
@use 'sass:math'

@debug math.$max-number  // 179769313486231570000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
math.$max-safe-integer
Совместимость:
Dart Sass
с версии 1.55.0
LibSass
✗
Ruby Sass
✗

Максимальное целое число n, такое что и n и n + 1 могут быть точно представлены как 64-битное число с плавающей точкой.

@use 'sass:math';

@debug math.$max-safe-integer; // 9007199254740991
// SASS
@use 'sass:math'

@debug math.$max-safe-integer  // 9007199254740991
math.$min-number
Совместимость:
Dart Sass
с версии 1.55.0
LibSass
✗
Ruby Sass
✗

Наименьшее положительное число, которое может быть представлено как 64-битное число с плавающей точкой. Из-за точности чисел Sass (10 знаков), во многих случаях это будет казаться 0.

math.$min-safe-integer
Совместимость:
Dart Sass
с версии 1.55.0
LibSass
✗
Ruby Sass
✗

Наименьшее целое число n, такое что и n и n - 1 могут быть точно представлены как 64-битное число с плавающей точкой.

@use 'sass:math';

@debug math.$min-safe-integer; // -9007199254740991
// SASS
@use 'sass:math'

@debug math.$min-safe-integer  // -9007199254740991
math.$pi
Совместимость:
Dart Sass
с версии 1.25.0
LibSass
✗
Ruby Sass
✗

Самое близкое 64-битное приближение с плавающей точкой математической константы π.

@use 'sass:math';

@debug math.$pi; // 3.1415926536
// SASS
@use 'sass:math'

@debug math.$pi  // 3.1415926536

Функции ограничения 

math.ceil($number)
ceil($number) //=> number

Округляет $number до ближайшего большего целого числа.

@use 'sass:math';

@debug math.ceil(4); // 4
@debug math.ceil(4.2); // 5
@debug math.ceil(4.9); // 5
// SASS
@use 'sass:math'

@debug math.ceil(4)  // 4
@debug math.ceil(4.2)  // 5
@debug math.ceil(4.9)  // 5
math.clamp($min, $number, $max) //=> number
Совместимость:
Dart Sass
с версии 1.25.0
LibSass
✗
Ruby Sass
✗

Ограничивает $number диапазоном от $min до $max. Если $number меньше, чем $min, возвращается $min, а если больше, чем $max, возвращается $max.

$min, $number и $max должны иметь совместимые единицы измерения или быть без единиц.

@use 'sass:math';

@debug math.clamp(-1, 0, 1); // 0
@debug math.clamp(1px, -1px, 10px); // 1px
@debug math.clamp(-1in, 1cm, 10mm); // 10mm
// SASS
@use 'sass:math'

@debug math.clamp(-1, 0, 1) // 0
@debug math.clamp(1px, -1px, 10px) // 1px
@debug math.clamp(-1in, 1cm, 10mm) // 10mm
math.floor($number)
floor($number) //=> number

Округляет $number до ближайшего меньшего целого числа.

@use 'sass:math';

@debug math.floor(4); // 4
@debug math.floor(4.2); // 4
@debug math.floor(4.9); // 4
// SASS
@use 'sass:math'

@debug math.floor(4)  // 4
@debug math.floor(4.2)  // 4
@debug math.floor(4.9)  // 4
math.max($number...)
max($number...) //=> number

Возвращает наибольшее из одного или нескольких чисел.

@use 'sass:math';

@debug math.max(1px, 4px); // 4px

$widths: 50px, 30px, 100px;
@debug math.max($widths...); // 100px
// SASS
@use 'sass:math'

@debug math.max(1px, 4px)  // 4px

$widths: 50px, 30px, 100px
@debug math.max($widths...)  // 100px
math.min($number...)
min($number...) //=> number

Возвращает наименьшее из одного или нескольких чисел.

@use 'sass:math';

@debug math.min(1px, 4px); // 1px

$widths: 50px, 30px, 100px;
@debug math.min($widths...); // 30px
// SASS
@use 'sass:math'

@debug math.min(1px, 4px)  // 1px

$widths: 50px, 30px, 100px
@debug math.min($widths...)  // 30px
math.round($number)
round($number) //=> number

Округляет $number до ближайшего целого числа.

@use 'sass:math';

@debug math.round(4); // 4
@debug math.round(4.2); // 4
@debug math.round(4.9); // 5
// SASS
@use 'sass:math'

@debug math.round(4)  // 4
@debug math.round(4.2)  // 4
@debug math.round(4.9)  // 5

Функции расстояния 

math.abs($number)
abs($number) //=> number

Возвращает абсолютное значение $number. Если $number отрицательное, возвращает -$number, а если $number положительное, возвращает $number как есть.

@use 'sass:math';

@debug math.abs(10px); // 10px
@debug math.abs(-10px); // 10px
// SASS
@use 'sass:math'

@debug math.abs(10px) // 10px
@debug math.abs(-10px) // 10px
math.hypot($number...) //=> number
Совместимость:
Dart Sass
с версии 1.25.0
LibSass
✗
Ruby Sass
✗

Возвращает длину n-мерного вектора, компоненты которого равны каждому $number. Например, для трёх чисел a, b и c, возвращается квадратный корень из a² + b² + c².

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

@use 'sass:math';

@debug math.hypot(3, 4); // 5

$lengths: 1in, 10cm, 50px;
@debug math.hypot($lengths...); // 4.0952775683in
// SASS
@use 'sass:math'

@debug math.hypot(3, 4) // 5

$lengths: 1in, 10cm, 50px
@debug math.hypot($lengths...) // 4.0952775683in

Экспоненциальные функции 

math.log($number, $base: null) //=> number
Совместимость:
Dart Sass
с версии 1.25.0
LibSass
✗
Ruby Sass
✗

Возвращает логарифм $number по основанию $base. Если $base равно null, вычисляется натуральный логарифм.

$number и $base должны быть без единиц измерения.

@use 'sass:math';

@debug math.log(10); // 2.302585093
@debug math.log(10, 10); // 1
// SASS
@use 'sass:math'

@debug math.log(10) // 2.302585093
@debug math.log(10, 10) // 1
math.pow($base, $exponent) //=> number
Совместимость:
Dart Sass
с версии 1.25.0
LibSass
✗
Ruby Sass
✗

Возводит $base в степень $exponent.

$base и $exponent должны быть без единиц измерения.

@use 'sass:math';

@debug math.pow(10, 2); // 100
@debug math.pow(100, math.div(1, 3)); // 4.6415888336
@debug math.pow(5, -2); // 0.04
// SASS
@use 'sass:math'

@debug math.pow(10, 2) // 100
@debug math.pow(100, math.div(1, 3)) // 4.6415888336
@debug math.pow(5, -2) // 0.04
math.sqrt($number) //=> number
Совместимость:
Dart Sass
с версии 1.25.0
LibSass
✗
Ruby Sass
✗

Возвращает квадратный корень из $number.

$number должен быть без единиц измерения.

@use 'sass:math';

@debug math.sqrt(100); // 10
@debug math.sqrt(math.div(1, 3)); // 0.5773502692
@debug math.sqrt(-1); // NaN
// SASS
@use 'sass:math'

@debug math.sqrt(100) // 10
@debug math.sqrt(math.div(1, 3)) // 0.5773502692
@debug math.sqrt(-1) // NaN

Тригонометрические функции

math.cos($number) //=> number
Совместимость:
Dart Sass
с версии 1.25.0
LibSass
✗
Ruby Sass
✗

Возвращает косинус $number.

$number должна быть углом (ее единицы должны быть совместимы с deg) или без единиц. Если у $number нет единиц, она предполагается в rad.

@use 'sass:math';

@debug math.cos(100deg); // -0.1736481777
@debug math.cos(1rad); // 0.5403023059
@debug math.cos(1); // 0.5403023059
// SASS
@use 'sass:math'

@debug math.cos(100deg) // -0.1736481777
@debug math.cos(1rad) // 0.5403023059
@debug math.cos(1) // 0.5403023059
math.sin($number) //=> number
Совместимость:
Dart Sass
с версии 1.25.0
LibSass
✗
Ruby Sass
✗

Возвращает синус $number.

$number должна быть углом (ее единицы должны быть совместимы с deg) или без единиц. Если у $number нет единиц, она предполагается в rad.

@use 'sass:math';

@debug math.sin(100deg); // 0.984807753
@debug math.sin(1rad); // 0.8414709848
@debug math.sin(1); // 0.8414709848
// SASS
@use 'sass:math'

@debug math.sin(100deg) // 0.984807753
@debug math.sin(1rad) // 0.8414709848
@debug math.sin(1) // 0.8414709848
math.tan($number) //=> number
Совместимость:
Dart Sass
с версии 1.25.0
LibSass
✗
Ruby Sass
✗

Возвращает тангенс $number.

$number должна быть углом (ее единицы должны быть совместимы с deg) или без единиц. Если у $number нет единиц, она предполагается в rad.

@use 'sass:math';

@debug math.tan(100deg); // -5.6712818196
@debug math.tan(1rad); // 1.5574077247
@debug math.tan(1); // 1.5574077247
// SASS
@use 'sass:math'

@debug math.tan(100deg) // -5.6712818196
@debug math.tan(1rad) // 1.5574077247
@debug math.tan(1) // 1.5574077247
math.acos($number) //=> number
Совместимость:
Dart Sass
с версии 1.25.0
LibSass
✗
Ruby Sass
✗

Возвращает арккосинус $number в deg.

$number должен быть без единиц измерения.

@use 'sass:math';

@debug math.acos(0.5); // 60deg
@debug math.acos(2); // NaNdeg
// SASS
@use 'sass:math'

@debug math.acos(0.5) // 60deg
@debug math.acos(2) // NaNdeg
math.asin($number) //=> number
Совместимость:
Dart Sass
с версии 1.25.0
LibSass
✗
Ruby Sass
✗

Возвращает арксинус $number в deg.

$number должен быть без единиц измерения.

@use 'sass:math';

@debug math.asin(0.5); // 30deg
@debug math.asin(2); // NaNdeg
// SASS
@use 'sass:math'

@debug math.asin(0.5) // 30deg
@debug math.asin(2) // NaNdeg
math.atan($number) //=> number
Совместимость:
Dart Sass
с версии 1.25.0
LibSass
✗
Ruby Sass
✗

Возвращает арктангенс $number в deg.

$number должен быть без единиц измерения.

@use 'sass:math';

@debug math.atan(10); // 84.2894068625deg
// SASS
@use 'sass:math'

@debug math.atan(10) // 84.2894068625deg
math.atan2($y, $x) //=> number
Совместимость:
Dart Sass
с версии 1.25.0
LibSass
✗
Ruby Sass
✗

Возвращает арктангенс от двух аргументов $y и $x в deg.

$y и $x должны иметь совместимые единицы или быть без единиц измерения.

💡 Интересный факт:

math.atan2($y, $x) отличается от atan(math.div($y, $x)), потому что сохраняет квадрант рассматриваемой точки. Например, math.atan2(1, -1) соответствует точке (-1, 1) и возвращает 135deg. В отличие от math.atan(math.div(1, -1)) и math.atan(math.div(-1, 1)), которые сначала приводят к atan(-1), поэтому оба возвращают -45deg.

@use 'sass:math';

@debug math.atan2(-1, 1); // 135deg
// SASS
@use 'sass:math'

@debug math.atan2(-1, 1) // 135deg

Функции для работы с единицами измерения

math.compatible($number1, $number2)
comparable($number1, $number2) //=> boolean

Возвращает, совместимы ли единицы измерения $number1 и $number2.

Если возвращается true, $number1 и $number2 можно безопасно сложить, вычесть и сравнить. В противном случае это приведет к ошибкам.

Глобальное имя этой функции — comparable, но при добавлении в модуль sass:math имя было изменено на compatible, чтобы более четко указать, что делает функция.

@use 'sass:math';

@debug math.compatible(2px, 1px); // true
@debug math.compatible(100px, 3em); // false
@debug math.compatible(10cm, 3mm); // true
// SASS
@use 'sass:math'

@debug math.compatible(2px, 1px)  // true
@debug math.compatible(100px, 3em)  // false
@debug math.compatible(10cm, 3mm)  // true
math.is-unitless($number)
unitless($number) //=> boolean

Возвращает, имеет ли $number единицы измерения.

@use 'sass:math';

@debug math.is-unitless(100); // true
@debug math.is-unitless(100px); // false
// SASS
@use 'sass:math'

@debug math.is-unitless(100)  // true
@debug math.is-unitless(100px)  // false
``` END_OF_DOCUMENT_MARKER 
math.unit($number)
unit($number) //=> quoted string

Возвращает строковое представление единиц измерения $number.

Эта функция предназначена для отладки; формат её вывода не гарантируется как неизменный между версиями или реализациями Sass.

@use 'sass:math';

@debug math.unit(100); // ""
@debug math.unit(100px); // "px"
@debug math.unit(5px * 10px); // "px*px"
@debug math.unit(math.div(5px, 1s)); // "px/s"
// SASS
@use 'sass:math'

@debug math.unit(100)  // ""
@debug math.unit(100px)  // "px"
@debug math.unit(5px * 10px)  // "px*px"
@debug math.unit(math.div(5px, 1s))  // "px/s"

Другие функции 

math.div($number1, $number2) //=> number
Совместимость:
Dart Sass
с 1.33.0
LibSass
✗
Ruby Sass
✗

Возвращает результат деления $number1 на $number2.

Любые единицы, общие для обоих чисел, будут сокращены. Единицы в $number1, которых нет в $number2, окажутся в числителе возвращаемого значения, а единицы в $number2, которых нет в $number1, окажутся в знаменателе.

Для обеспечения обратной совместимости, эта функция возвращает абсолютно такой же результат, как и устаревший оператор /, включая конкатенацию двух строк с символом / между ними. Тем не менее, это поведение в конечном счёте будет удалено и не должно использоваться в новых стилях.

@use 'sass:math';

@debug math.div(1, 2); // 0.5
@debug math.div(100px, 5px); // 20
@debug math.div(100px, 5); // 20px
@debug math.div(100px, 5s); // 20px/s
// SASS
@use 'sass:math'

@debug math.div(1, 2)  // 0.5
@debug math.div(100px, 5px)  // 20
@debug math.div(100px, 5)  // 20px
@debug math.div(100px, 5s)  // 20px/s
math.percentage($number)
percentage($number) //=> number

Преобразует безразмерное значение $number (обычно десятичное число между 0 и 1) в процент.

💡 Интересный факт:

Эта функция идентична $number * 100%.

@use 'sass:math';

@debug math.percentage(0.2); // 20%
@debug math.percentage(math.div(100px, 50px)); // 200%
// SASS
@use 'sass:math'

@debug math.percentage(0.2)  // 20%
@debug math.percentage(math.div(100px, 50px))  // 200%
math.random($limit: null)
random($limit: null) //=> number

Если $limit равно null, возвращает случайное десятичное число от 0 до 1.

@use 'sass:math';

@debug math.random(); // 0.2821251858
@debug math.random(); // 0.6221325814
// SASS
@use 'sass:math'

@debug math.random()  // 0.2821251858
@debug math.random()  // 0.6221325814

Если $limit больше или равно 1, возвращает случайное целое число от 1 до $limit.

random() игнорирует единицы измерения в $limit. Это поведение устарело и random($limit) вернёт случайное целое число с теми же единицами, что и аргумент $limit.

@use 'sass:math';

@debug math.random(100px); // 42
// SASS
@use 'sass:math'

@debug math.random(100px)  // 42
@use 'sass:math';

@debug math.random(10); // 4
@debug math.random(10000); // 5373
// SASS
@use 'sass:math'

@debug math.random(10)  // 4
@debug math.random(10000)  // 5373

© 2006–2025 the Sass team, and numerous contributors
Licensed under the MIT License.
https://sass-lang.com/documentation/modules/math

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API