sass:math

互換性
Dart Sass
1.23.0以降
LibSass
✗
Ruby Sass
✗

現在、Dart Sassのみが@useを使用した組み込みモジュールのロードをサポートしています。他の実装のユーザーは、グローバル名を使用して関数を呼び出す必要があります 。

変数変数のパーマリンク

math.$e
互換性
Dart Sass
1.25.0以降
LibSass
✗
Ruby Sass
✗

数学定数eの最も近い64ビット浮動小数点近似。

プレイグラウンド

SCSS構文

@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と1より大きい最小の64ビット浮動小数点数の差。Sass数値の10桁の精度のため、多くの場合、これは0のように見えます 。

math.$max-number
互換性
Dart Sass
1.55.0以降
LibSass
✗
Ruby Sass
✗

64ビット浮動小数点数として表現できる最大有限数です 。

プレイグラウンド

SCSS構文

@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
✗

64ビット浮動小数点数としてnとn + 1の両方を正確に表現できる最大の整数nです 。

プレイグラウンド

SCSS構文

@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
✗

64ビット浮動小数点数としてnとn - 1の両方を正確に表現できる最小の整数nです 。

プレイグラウンド

SCSS構文

@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ビット浮動小数点近似。

プレイグラウンド

SCSS構文

@use 'sass:math';

@debug math.$pi; // 3.1415926536
プレイグラウンド

Sass構文

@use 'sass:math'

@debug math.$pi  // 3.1415926536

境界関数境界関数のパーマリンク

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

$numberを切り上げて、次の最も大きい整数にします 。

プレイグラウンド

SCSS構文

@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は、互換性のある単位を持つか、すべて単位なしである必要があります 。

プレイグラウンド

SCSS構文

@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を切り捨てて、次の最も小さい整数にします 。

プレイグラウンド

SCSS構文

@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

1つ以上の数のうち最大のものを返します 。

プレイグラウンド

SCSS構文

@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

1つ以上の数のうち最小のものを返します 。

プレイグラウンド

SCSS構文

@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を最も近い整数に丸めます 。

プレイグラウンド

SCSS構文

@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をそのまま返します。

プレイグラウンド

SCSS構文

@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
✗

各$numberに等しい成分を持つn次元ベクトルの長さを返します。たとえば、3つの数値a、b、およびcの場合、これはa² + b² + c²の平方根を返します。

数値はすべて互換性のある単位を持つか、すべて単位なしである必要があります。また、数値の単位が異なる場合があるため、出力は最初の数値の単位を取ります 。

プレイグラウンド

SCSS構文

@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は単位なしである必要があります 。

プレイグラウンド

SCSS構文

@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は単位なしである必要があります 。

プレイグラウンド

SCSS構文

@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は単位なしである必要があります 。

プレイグラウンド

SCSS構文

@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であると見なされます。

プレイグラウンド

SCSS構文

@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であると見なされます。

プレイグラウンド

SCSS構文

@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であると見なされます。

プレイグラウンド

SCSS構文

@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は単位なしである必要があります 。

プレイグラウンド

SCSS構文

@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は単位なしである必要があります 。

プレイグラウンド

SCSS構文

@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は単位なしである必要があります 。

プレイグラウンド

SCSS構文

@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の2引数アークタンジェントを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を返します。

プレイグラウンド

SCSS構文

@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に変更されました 。

プレイグラウンド

SCSS構文

@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に単位がないかどうかを返します 。

プレイグラウンド

SCSS構文

@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

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

$numberの単位の文字列表現を返します。

⚠️ 注意！

この関数はデバッグ用です。その出力形式は、Sassのバージョンや実装間で一貫しているとは限りません 。

プレイグラウンド

SCSS構文

@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にない単位は分母になります 。

⚠️ 注意！

下位互換性のために、これは非推奨の/演算子とまったく同じ結果を返します。これには、2つの文字列を/文字で連結することも含まれます。ただし、この動作は最終的に削除されるため、新しいスタイルシートで使用しないでください 。

プレイグラウンド

SCSS構文

@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の間の10進数）を パーセンテージに変換します。

💡 豆知識

この関数は$number * 100%と同じです。

プレイグラウンド

SCSS構文

@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の間のランダムな10進数を返します 。

プレイグラウンド

SCSS構文

@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引数と同じ単位のランダムな整数を返します。

プレイグラウンド

SCSS構文

@use 'sass:math';

@debug math.random(100px); // 42
プレイグラウンド

Sass構文

@use 'sass:math'

@debug math.random(100px)  // 42
プレイグラウンド

SCSS構文

@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