Compatibility: Dart Sass since 1.23.0 LibSass ✗ Ruby Sass ✗
目前只有 Dart Sass 支持使用 @use 加载内置模块。 其他实现的用户必须改为使用其全局名称调用函数。
Variables
math.$e
Compatibility: Dart Sass since 1.25.0 LibSass ✗ Ruby Sass ✗
数学常数 e 的最接近的 64 位浮点数近似值。
SCSS Syntax
@debug math.$e; // 2.7182818285
math.$epsilon
Compatibility: Dart Sass since 1.55.0 LibSass ✗ Ruby Sass ✗
根据浮点比较，1 与大于 1 的最小 64 位浮点数之间的差值。 由于 Sass 数字的 10 位精度，在许多情况下这将显示为 0。
math.$max-number
Compatibility: Dart Sass since 1.55.0 LibSass ✗ Ruby Sass ✗
可以表示为 64 位浮点数的最大有限数。
SCSS Syntax
@debug math.$max-number; // 179769313486231570000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
math.$max-safe-integer
Compatibility: Dart Sass since 1.55.0 LibSass ✗ Ruby Sass ✗
最大整数“n”，使得“n”和n + 1都可以精确表示为 64 位浮点数。
SCSS Syntax
@debug math.$max-safe-integer; // 9007199254740991
math.$min-number
Compatibility: Dart Sass since 1.55.0 LibSass ✗ Ruby Sass ✗
可以表示为 64 位浮点数的最小正数。 由于 Sass 数字的 10 位精度，在许多情况下这将显示为 0。
math.$min-safe-integer
Compatibility: Dart Sass since 1.55.0 LibSass ✗ Ruby Sass ✗
最小整数“n”，使得“n”和“n - 1”都可以精确表示为 64 位浮点数。
SCSS Syntax
@debug math.$min-safe-integer; // -9007199254740991
math.$pi
Compatibility: Dart Sass since 1.25.0 LibSass ✗ Ruby Sass ✗
数学常数 π 的最接近的 64 位浮点数近似值。
SCSS Syntax
@debug math.$pi; // 3.1415926536
Bounding Functions
math.ceil($number)
ceil($number) //=> number
将 $number 舍入到下一个最大的整数。
SCSS Syntax
@debug math.ceil(4); // 4
@debug math.ceil(4.2); // 5
@debug math.ceil(4.9); // 5
math.clamp($min, $number, $max) //=> number
Compatibility: Dart Sass since 1.25.0 LibSass ✗ Ruby Sass ✗
将 $number 限制在 $min 和 $max 之间。 如果 $number 小于 $min，则返回 $min，如果大于 $max，则返回 $max。
$min、$number 和 $max 必须有兼容的单位，否则都没有单位。
SCSS Syntax
@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 向下舍入到下一个最小的整数。
SCSS Syntax
@debug math.floor(4); // 4
@debug math.floor(4.2); // 4
@debug math.floor(4.9); // 4
math.max($number...)
max($number...) //=> number
返回一个或多个数字中的最大值。
SCSS Syntax
@debug math.max(1px, 4px); // 4px
$widths: 50px, 30px, 100px;
@debug math.max($widths...); // 100px
math.min($number...)
min($number...) //=> number
返回一个或多个数字中的最小值。
SCSS Syntax
@debug math.min(1px, 4px); // 1px
$widths: 50px, 30px, 100px;
@debug math.min($widths...); // 30px
math.round($number)
round($number) //=> number
将 $number 舍入到最接近的整数。
SCSS Syntax
@debug math.round(4); // 4
@debug math.round(4.2); // 4
@debug math.round(4.9); // 5
Distance Functions
math.abs($number)
abs($number) //=> number
返回“$number”的绝对值。 如果 $number 为负数，则返回 -$number，如果 $number 为正数，则返回 $number 原样。
SCSS Syntax
@debug math.abs(10px); // 10px
@debug math.abs(-10px); // 10px
math.hypot($number...) //=> number
Compatibility: Dart Sass since 1.25.0 LibSass ✗ Ruby Sass ✗
返回 n-dimensional 向量 的长度，其分量等于每个“$number”。 例如，对于三个数字 a、b 和 c，返回 a² + b² + c² 的平方根。
这些数字必须要么都具有兼容的单位，要么都没有单位。 由于数字的单位可能不同，因此输出采用第一个数字的单位。
SCSS Syntax
@debug math.hypot(3, 4); // 5
$lengths: 1in, 10cm, 50px;
@debug math.hypot($lengths...); // 4.0952775683in
Exponential Functions
math.log($number, $base: null) //=> number
Compatibility: Dart Sass since 1.25.0 LibSass ✗ Ruby Sass ✗
返回 $number 相对于 $base 的对数。 如果 $base 为 null，则计算 自然对数。
$number 和 $base 必须是无单位的。
SCSS Syntax
@debug math.log(10); // 2.302585093
@debug math.log(10, 10); // 1
math.pow($base, $exponent) //=> number
Compatibility: Dart Sass since 1.25.0 LibSass ✗ Ruby Sass ✗
Raises $base to the power of $exponent.
$base and $exponent must be unitless.
SCSS Syntax
@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
Compatibility: Dart Sass since 1.25.0 LibSass ✗ Ruby Sass ✗
Returns the square root of $number.
$number must be unitless.
SCSS Syntax
@debug math.sqrt(100); // 10
@debug math.sqrt(math.div(1, 3)); // 0.5773502692
@debug math.sqrt(-1); // NaN
Trigonometric Functions
math.cos($number) //=> number
Compatibility: Dart Sass since 1.25.0 LibSass ✗ Ruby Sass ✗
Returns the cosine of $number.
$number must be an angle (its units must be compatible with deg) or unitless. If $number has no units, it is assumed to be in rad.
SCSS Syntax
@debug math.cos(100deg); // -0.1736481777
@debug math.cos(1rad); // 0.5403023059
@debug math.cos(1); // 0.5403023059
math.sin($number) //=> number
Compatibility: Dart Sass since 1.25.0 LibSass ✗ Ruby Sass ✗
Returns the sine of $number.
$number must be an angle (its units must be compatible with deg) or unitless. If $number has no units, it is assumed to be in rad.
SCSS Syntax
@debug math.sin(100deg); // 0.984807753
@debug math.sin(1rad); // 0.8414709848
@debug math.sin(1); // 0.8414709848
math.tan($number) //=> number
Compatibility: Dart Sass since 1.25.0 LibSass ✗ Ruby Sass ✗
Returns the tangent of $number.
$number must be an angle (its units must be compatible with deg) or unitless. If $number has no units, it is assumed to be in rad.
SCSS Syntax
@debug math.tan(100deg); // -5.6712818196
@debug math.tan(1rad); // 1.5574077247
@debug math.tan(1); // 1.5574077247
math.acos($number) //=> number
Compatibility: Dart Sass since 1.25.0 LibSass ✗ Ruby Sass ✗
Returns the arccosine of $number in deg.
$number must be unitless.
SCSS Syntax
@debug math.acos(0.5); // 60deg
@debug math.acos(2); // NaNdeg
math.asin($number) //=> number
Compatibility: Dart Sass since 1.25.0 LibSass ✗ Ruby Sass ✗
Returns the arcsine of $number in deg.
$number must be unitless.
SCSS Syntax
@debug math.asin(0.5); // 30deg
@debug math.asin(2); // NaNdeg
math.atan($number) //=> number
Compatibility: Dart Sass since 1.25.0 LibSass ✗ Ruby Sass ✗
Returns the arctangent of $number in deg.
$number must be unitless.
SCSS Syntax
@debug math.atan(10); // 84.2894068625deg
math.atan2($y, $x) //=> number
Compatibility: Dart Sass since 1.25.0 LibSass ✗ Ruby Sass ✗
Returns the 2-argument arctangent of $y and $x in deg.
$y and $x must have compatible units or be unitless.
💡 Fun fact:
math.atan2($y, $x) is distinct from atan(math.div($y, $x)) because it preserves the quadrant of the point in question. For example, math.atan2(1, -1) corresponds to the point (-1, 1) and returns 135deg. In contrast, math.atan(math.div(1, -1)) and math.atan(math.div(-1, 1)) resolve first to atan(-1), so both return -45deg.
SCSS Syntax
@debug math.atan2(-1, 1); // 135deg
Unit Functions
math.compatible($number1, $number2)
comparable($number1, $number2) //=> boolean
Returns whether $number1 and $number2 have compatible units.
If this returns true, $number1 and $number2 can safely be added, subtracted, and compared. Otherwise, doing so will produce errors.
⚠️ Heads up!
The global name of this function is compa**ra**ble, but when it was added to the sass:math module the name was changed to compa**ti**ble to more clearly convey what the function does.
SCSS Syntax
@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
Returns whether $number has no units.
SCSS Syntax
@debug math.is-unitless(100); // true
@debug math.is-unitless(100px); // false
math.unit($number)
unit($number) //=> quoted string
Returns a string representation of $number‘s units.
⚠️ Heads up!
This function is intended for debugging; its output format is not guaranteed to be consistent across Sass versions or implementations.
SCSS Syntax
@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"
Other Functions
math.div($number1, $number2) //=> number
Compatibility: Dart Sass since 1.33.0 LibSass ✗ Ruby Sass ✗
Returns the result of dividing $number1 by $number2.
Any units shared by both numbers will be canceled out. Units in $number1 that aren’t in $number2 will end up in the return value’s numerator, and units in $number2 that aren’t in $number1 will end up in its denominator.
⚠️ Heads up!
For backwards-compatibility purposes, this returns the exact same result as the deprecated / operator, including concatenating two strings with a / character between them. However, this behavior will be removed eventually and shouldn’t be used in new stylesheets.
SCSS Syntax
@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
Converts a unitless $number (usually a decimal between 0 and 1) to a percentage.
💡 Fun fact:
This function is identical to $number * 100%.
SCSS Syntax
@debug math.percentage(0.2); // 20%
@debug math.percentage(math.div(100px, 50px)); // 200%
math.random($limit: null)
random($limit: null) //=> number
If $limit is null, returns a random decimal number between 0 and 1.
SCSS Syntax
@debug math.random(); // 0.2821251858
@debug math.random(); // 0.6221325814
If $limit is a number greater than or equal to 1, returns a random whole number between 1 and $limit.
⚠️ Heads up!
random() ignores units in $limit. This behavior is deprecated and random($limit) will return a random integer with the same units as the $limit argument.
SCSS Syntax
@debug math.random(100px); // 42
SCSS Syntax
@debug math.random(10); // 4
@debug math.random(10000); // 5373