sass:math

Dart Sass: since 1.23.0
LibSass: ✗
Ruby Sass: ✗

Only Dart Sass currently supports loading built-in modules with @use. Users of other implementations must call functions using their global names instead.

变量变量 permalink

¥Variables

math.$e

Dart Sass: since 1.25.0
LibSass: ✗
Ruby Sass: ✗

最接近数学常量 e 的 64 位浮点近似值。

¥The closest 64-bit floating point approximation of the mathematical constant e.

  SCSS

  Sass

      Playground
    SCSS Syntax@use 'sass:math';

@debug math.$e; // 2.7182818285

      Playground
    Sass Syntax@use 'sass:math'

@debug math.$e  // 2.7182818285

math.$epsilon

Dart Sass: since 1.55.0
LibSass: ✗
Ruby Sass: ✗

根据浮点比较，1 与大于 1 的最小 64 位浮点数之间的差异。由于 Sass 数字的 10 位精度，在许多情况下这将显示为 0。

¥The difference between 1 and the smallest 64-bit floating point number greater than 1 according to floating-point comparisons. Because of Sass numbers’ 10 digits of precision, in many cases this will appear to be 0.

math.$max-number

Dart Sass: since 1.55.0
LibSass: ✗
Ruby Sass: ✗

可以表示为 64 位浮点数的最大有限数。

¥The maximum finite number that can be represented as a 64-bit floating point number.

  SCSS

  Sass

      Playground
    SCSS Syntax@use 'sass:math';

@debug math.$max-number; // 179769313486231570000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

      Playground
    Sass Syntax@use 'sass:math'

@debug math.$max-number  // 179769313486231570000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

math.$max-safe-integer

Dart Sass: since 1.55.0
LibSass: ✗
Ruby Sass: ✗

最大整数 n，使得 n 和 n + 1 都可以精确表示为 64 位浮点数。

¥The maximum integer n such that both n and n + 1 can be precisely represented as a 64-bit floating-point number.

  SCSS

  Sass

      Playground
    SCSS Syntax@use 'sass:math';

@debug math.$max-safe-integer; // 9007199254740991

      Playground
    Sass Syntax@use 'sass:math'

@debug math.$max-safe-integer  // 9007199254740991

math.$min-number

Dart Sass: since 1.55.0
LibSass: ✗
Ruby Sass: ✗

可以表示为 64 位浮点数的最小正数。由于 Sass 数字的 10 位精度，在许多情况下这将显示为 0。

¥The smallest positive number that can be represented as a 64-bit floating point number. Because of Sass numbers’ 10 digits of precision, in many cases this will appear to be 0.

math.$min-safe-integer

Dart Sass: since 1.55.0
LibSass: ✗
Ruby Sass: ✗

使得 n 和 n - 1 都可以精确表示为 64 位浮点数的最小整数 n。

¥The minimum integer n such that both n and n - 1 can be precisely represented as a 64-bit floating-point number.

  SCSS

  Sass

      Playground
    SCSS Syntax@use 'sass:math';

@debug math.$min-safe-integer; // -9007199254740991

      Playground
    Sass Syntax@use 'sass:math'

@debug math.$min-safe-integer  // -9007199254740991

math.$pi

Dart Sass: since 1.25.0
LibSass: ✗
Ruby Sass: ✗

最接近数学常量 π 的 64 位浮点近似值。

¥The closest 64-bit floating point approximation of the mathematical constant π.

  SCSS

  Sass

      Playground
    SCSS Syntax@use 'sass:math';

@debug math.$pi; // 3.1415926536

      Playground
    Sass Syntax@use 'sass:math'

@debug math.$pi  // 3.1415926536

边界函数边界函数 permalink

¥Bounding Functions

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

将 $number 向上舍入到下一个最大整数。

¥Rounds $number up to the next highest whole number.

  SCSS

  Sass

      
      Playground
    SCSS Syntax@use 'sass:math';

@debug math.ceil(4); // 4
@debug math.ceil(4.2); // 5
@debug math.ceil(4.9); // 5

      
      Playground
    Sass Syntax@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: since 1.25.0
LibSass: ✗
Ruby Sass: ✗

将 $number 限制在 $min 和 $max 之间的范围。如果 $number 小于 $min，则返回 $min；如果大于 $max，则返回 $max。

¥Restricts $number to the range between $min and $max. If $number is less than $min this returns $min, and if it’s greater than $max this returns $max.

$min、$number 和 $max 必须具有兼容的单位，或者全部都是无单位的。

¥$min, $number, and $max must have compatible units, or all be unitless.

  SCSS

  Sass

      
      Playground
    SCSS Syntax@use 'sass:math';

@debug math.clamp(-1, 0, 1); // 0
@debug math.clamp(1px, -1px, 10px); // 1px
@debug math.clamp(-1in, 1cm, 10mm); // 10mm

      
      Playground
    Sass Syntax@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 向下舍入到下一个最低整数。

¥Rounds $number down to the next lowest whole number.

  SCSS

  Sass

      
      Playground
    SCSS Syntax@use 'sass:math';

@debug math.floor(4); // 4
@debug math.floor(4.2); // 4
@debug math.floor(4.9); // 4

      
      Playground
    Sass Syntax@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

返回一个或多个数字中的最高值。

¥Returns the highest of one or more numbers.

  SCSS

  Sass

      Playground
    SCSS Syntax@use 'sass:math';

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

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

      Playground
    Sass Syntax@use 'sass:math'

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

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

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

返回一个或多个数字中的最小值。

¥Returns the lowest of one or more numbers.

  SCSS

  Sass

      Playground
    SCSS Syntax@use 'sass:math';

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

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

      Playground
    Sass Syntax@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 四舍五入到最接近的整数。

¥Rounds $number to the nearest whole number.

  SCSS

  Sass

      
      Playground
    SCSS Syntax@use 'sass:math';

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

      
      Playground
    Sass Syntax@use 'sass:math'

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

距离函数距离函数 permalink

¥Distance Functions

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

返回 $number 的绝对值。如果 $number 为负数，则返回 -$number；如果 $number 为正数，则按原样返回 $number。

¥Returns the absolute value of $number. If $number is negative, this returns -$number, and if $number is positive, it returns $number as-is.

  SCSS

  Sass

      Playground
    SCSS Syntax@use 'sass:math';

@debug math.abs(10px); // 10px
@debug math.abs(-10px); // 10px

      Playground
    Sass Syntax@use 'sass:math'

@debug math.abs(10px) // 10px
@debug math.abs(-10px) // 10px

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

Dart Sass: since 1.25.0
LibSass: ✗
Ruby Sass: ✗

返回其分量等于每个 $number 的 n 维向量的长度。例如，对于三个数字 a、b 和 c，这将返回 a² + b² + c² 的平方根。

¥Returns the length of the n-dimensional vector that has components equal to each $number. For example, for three numbers a, b, and c, this returns the square root of a² + b² + c².

这些数字必须全部具有兼容的单位，或者全部没有单位。由于数字的单位可能不同，因此输出采用第一个数字的单位。

¥The numbers must either all have compatible units, or all be unitless. And since the numbers’ units may differ, the output takes the unit of the first number.

  SCSS

  Sass

      Playground
    SCSS Syntax@use 'sass:math';

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

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

      Playground
    Sass Syntax@use 'sass:math'

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

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

指数函数指数函数 permalink

¥Exponential Functions

math.log($number, $base: null) //=> number

Dart Sass: since 1.25.0
LibSass: ✗
Ruby Sass: ✗

返回 $number 相对于 $base 的对数。如果 $base 是 null，则计算自然对数。

¥Returns the logarithm of $number with respect to $base. If $base is null, the natural log is calculated.

$number 和 $base 必须无单位。

¥$number and $base must be unitless.

  SCSS

  Sass

      Playground
    SCSS Syntax@use 'sass:math';

@debug math.log(10); // 2.302585093
@debug math.log(10, 10); // 1

      Playground
    Sass Syntax@use 'sass:math'

@debug math.log(10) // 2.302585093
@debug math.log(10, 10) // 1

math.pow($base, $exponent) //=> number

Dart Sass: since 1.25.0
LibSass: ✗
Ruby Sass: ✗

加注 $base 的力量 $exponent。

¥Raises $base to the power of $exponent.

$base 和 $exponent 必须无单位。

¥$base and $exponent must be unitless.

  SCSS

  Sass

      
      Playground
    SCSS Syntax@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

      
      Playground
    Sass Syntax@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: since 1.25.0
LibSass: ✗
Ruby Sass: ✗

返回 $number 的平方根。

¥Returns the square root of $number.

$number 必须无单位。

¥$number must be unitless.

  SCSS

  Sass

      
      Playground
    SCSS Syntax@use 'sass:math';

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

      
      Playground
    Sass Syntax@use 'sass:math'

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

三角函数三角函数 permalink

¥Trigonometric Functions

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

Dart Sass: since 1.25.0
LibSass: ✗
Ruby Sass: ✗

返回 $number 的余弦。

¥Returns the cosine of $number.

$number 必须是角度（其单位必须与 deg 兼容）或无单位。如果 $number 没有单位，则假定为 rad。

¥$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

  Sass

      
      Playground
    SCSS Syntax@use 'sass:math';

@debug math.cos(100deg); // -0.1736481777
@debug math.cos(1rad); // 0.5403023059
@debug math.cos(1); // 0.5403023059

      
      Playground
    Sass Syntax@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: since 1.25.0
LibSass: ✗
Ruby Sass: ✗

返回 $number 的正弦。

¥Returns the sine of $number.

$number 必须是角度（其单位必须与 deg 兼容）或无单位。如果 $number 没有单位，则假定为 rad。

¥$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

  Sass

      
      Playground
    SCSS Syntax@use 'sass:math';

@debug math.sin(100deg); // 0.984807753
@debug math.sin(1rad); // 0.8414709848
@debug math.sin(1); // 0.8414709848

      
      Playground
    Sass Syntax@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: since 1.25.0
LibSass: ✗
Ruby Sass: ✗

返回 $number 的切线。

¥Returns the tangent of $number.

$number 必须是角度（其单位必须与 deg 兼容）或无单位。如果 $number 没有单位，则假定为 rad。

¥$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

  Sass

      
      Playground
    SCSS Syntax@use 'sass:math';

@debug math.tan(100deg); // -5.6712818196
@debug math.tan(1rad); // 1.5574077247
@debug math.tan(1); // 1.5574077247

      
      Playground
    Sass Syntax@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: since 1.25.0
LibSass: ✗
Ruby Sass: ✗

返回 deg 中 $number 的反余弦。

¥Returns the arccosine of $number in deg.

$number 必须无单位。

¥$number must be unitless.

  SCSS

  Sass

      Playground
    SCSS Syntax@use 'sass:math';

@debug math.acos(0.5); // 60deg
@debug math.acos(2); // NaNdeg

      Playground
    Sass Syntax@use 'sass:math'

@debug math.acos(0.5) // 60deg
@debug math.acos(2) // NaNdeg

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

Dart Sass: since 1.25.0
LibSass: ✗
Ruby Sass: ✗

返回 deg 中 $number 的反正弦。

¥Returns the arcsine of $number in deg.

$number 必须无单位。

¥$number must be unitless.

  SCSS

  Sass

      Playground
    SCSS Syntax@use 'sass:math';

@debug math.asin(0.5); // 30deg
@debug math.asin(2); // NaNdeg

      Playground
    Sass Syntax@use 'sass:math'

@debug math.asin(0.5) // 30deg
@debug math.asin(2) // NaNdeg

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

Dart Sass: since 1.25.0
LibSass: ✗
Ruby Sass: ✗

返回 deg 中 $number 的反正切。

¥Returns the arctangent of $number in deg.

$number 必须无单位。

¥$number must be unitless.

  SCSS

  Sass

      Playground
    SCSS Syntax@use 'sass:math';

@debug math.atan(10); // 84.2894068625deg

      Playground
    Sass Syntax@use 'sass:math'

@debug math.atan(10) // 84.2894068625deg

math.atan2($y, $x) //=> number

Dart Sass: since 1.25.0
LibSass: ✗
Ruby Sass: ✗

返回 deg 中 $y 和 $x 的 2 参数反正切。

¥Returns the 2-argument arctangent of $y and $x in deg.

$y 和 $x 必须具有兼容的单位或无单位。

¥$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

  Sass

      Playground
    SCSS Syntax@use 'sass:math';

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

      Playground
    Sass Syntax@use 'sass:math'

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

单位函数单位函数 permalink

¥Unit Functions

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

返回 $number1 和 $number2 是否具有兼容的单位。

¥Returns whether $number1 and $number2 have compatible units.

如果返回 true、$number1 和 $number2 可以安全地为添加、减去和比较的。否则，这样做会产生错误。

¥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
<code>compa<strong>ra</strong>ble</code>, but when it was added to the
`sass:math` module the name was changed to
<code>compa<strong>ti</strong>ble</code> to more clearly convey what the
function does.

  SCSS

  Sass

      
      Playground
    SCSS Syntax@use 'sass:math';

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

      
      Playground
    Sass Syntax@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 是否没有单位。

¥Returns whether $number has no units.

  SCSS

  Sass

      Playground
    SCSS Syntax@use 'sass:math';

@debug math.is-unitless(100); // true
@debug math.is-unitless(100px); // false

      Playground
    Sass Syntax@use 'sass:math'

@debug math.is-unitless(100)  // true
@debug math.is-unitless(100px)  // false

math.unit($number)
unit($number) //=> quoted string

返回 $number 单位的字符串表示形式。

¥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

  Sass

      
      Playground
    SCSS Syntax@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"

      
      Playground
    Sass Syntax@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"

其他函数其他函数 permalink

¥Other Functions

math.div($number1, $number2) //=> number

Dart Sass: since 1.33.0
LibSass: ✗
Ruby Sass: ✗

返回 $number1 除以 $number2 的结果。

¥Returns the result of dividing $number1 by $number2.

两个号码共享的任何单位都将被取消。$number1 中不在 $number2 中的单位将最终出现在返回值的分子中，而 $number2 中不在 $number1 中的单位将最终出现在其分母中。

¥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

  Sass

      
      Playground
    SCSS Syntax@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

      
      Playground
    Sass Syntax@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 之间的小数）转换为百分比。

¥Converts a unitless $number (usually a decimal between 0 and 1) to a percentage.

💡 Fun fact:

This function is identical to `$number * 100%`.

  SCSS

  Sass

      Playground
    SCSS Syntax@use 'sass:math';

@debug math.percentage(0.2); // 20%
@debug math.percentage(math.div(100px, 50px)); // 200%

      Playground
    Sass Syntax@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 之间的随机十进制数。

¥If $limit is null, returns a random decimal number between 0 and 1.

  SCSS

  Sass

      Playground
    SCSS Syntax@use 'sass:math';

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

      Playground
    Sass Syntax@use 'sass:math'

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

如果 $limit 是大于或等于 1 的数字，则返回 1 到 $limit 之间的随机整数。

¥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

  Sass

      Playground
    SCSS Syntax@use 'sass:math';

@debug math.random(100px); // 42

      Playground
    Sass Syntax@use 'sass:math'

@debug math.random(100px)  // 42

  SCSS

  Sass

      Playground
    SCSS Syntax@use 'sass:math';

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

      Playground
    Sass Syntax@use 'sass:math'

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