sass:math

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

Atualmente apenas a Sass de Dart suporta carregar módulos embutidos com a @use. Os utilizadores de outras implementações devem chamar as funções usando os seus nomes globais.

VariáveisVariáveis permalink

math.$e

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

Igual ao valor da constante matemática e.

  SCSS

  Sass

  SCSS Syntax@debug math.$e; // 2.7182818285

  Sass Syntax@debug math.$e  // 2.7182818285

math.$epsilon

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

A diferença entre 1 e o menor número de ponto flutuante de 64-bit maior do que 1 de acordo com as comparações de ponto flutuante. Por causa da [precisão de 10 dígitos](/documentation/values/numbers) dos números da Sass, em muitos casos isto parecerá ser 0.

math.$max-number

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

O máximo número finito que pode ser representado como um número de ponto flutuante de 64-bit.

  SCSS

  Sass

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

  Sass Syntax@debug math.$max-number  // 179769313486231570000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

math.$max-safe-integer

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

O máximo n inteiro tal que ambos n e n + 1 pode ser precisamente representado como um número de ponto flutuante de 64-bit.

  SCSS

  Sass

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

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

math.$min-number

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

O menor número positivo que pode ser representado como um número de ponto flutuante de 64-bit. Por causa da precisão de 10 dígitos dos números da Sass, em muitos casos isto parecerá ser 0.

math.$min-safe-integer

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

O mínimo n inteiro tal que ambos n e n + 1 pode ser precisamente representado como um número de ponto flutuante de 64-bit.

  SCSS

  Sass

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

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

math.$pi

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

O mais próxima aproximação de ponto flutuante de 64-bit da constante matemática π.

  SCSS

  Sass

  SCSS Syntax@debug math.$pi; // 3.1415926536

  Sass Syntax@debug math.$pi  // 3.1415926536

Funções de LimitesFunções de Limites permalink

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

Arredonda $number para cima para o próximo maior número inteiro.

  SCSS

  Sass

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

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

math.clamp($min, $number, $max) //=> number

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

Reduz $number para o limite entre $min e $max. Se $number for menor do que $min este retorna $min, e se for maior do que $max este retorna $max.

$min, $number, e $max devem ter unidades compatíveis, ou ser todos sem unidade.

  SCSS

  Sass

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

  Sass 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

Arredonda $number para baixo para o próximo menor número inteiro.

  SCSS

  Sass

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

  Sass Syntax@debug math.floor(4)  // 4
@debug math.floor(4.2)  // 4
@debug math.floor(4.9)  // 4

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

Retorna o maior de um ou mais números.

  SCSS

  Sass

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

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

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

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

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

Retorna o menor de um ou mais números.

  SCSS

  Sass

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

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

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

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

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

Arredonda $number para o mais próximo número inteiro.

  SCSS

  Sass

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

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

Funções de DistânciasFunções de Distâncias permalink

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

Retorna o valor absoluto de $number. Se $number for negativo, este retorna -$number, e se $number for positivo, retorna $number como está.

  SCSS

  Sass

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

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

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

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

Retorna o comprimento do vetor de n-dimensão que tem componentes iguais a cada $number. Por exemplo, para três números a, b, e c, este retorna a raiz quadrada de a² + b² + c².

Os números devem ou todos ter unidades compatíveis, ou ser todos sem unidade. E uma vez que as unidades dos números podem diferir, a saída recebe a unidade do primeiro número.

  SCSS

  Sass

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

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

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

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

Funções ExponenciaisFunções Exponenciais permalink

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

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

Retorna o logaritmo de $number com respeito a $base. Se $base é null, o logaritmo natural é calculado.

$number e $base devem ser sem unidade.

  SCSS

  Sass

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

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

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

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

Eleva $base à potência de $exponent.

$base e $exponent devem ser sem unidade.

  SCSS

  Sass

  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

  Sass 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

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

Retorna a raiz quadrada de $number.

$number deve ser sem unidade.

  SCSS

  Sass

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

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

Funções TrigonométricasFunções Trigonométricas permalink

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

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

Retorna o cosseno de $number.

$number deve ser um ângulo (sua unidade deve ser compatível com deg) ou sem unidade. Se $number não tiver nenhuma unidade, assume-se que está em rad.

  SCSS

  Sass

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

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

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

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

Retorna o seno de $number.

$number deve ser um ângulo (sua unidade deve ser compatível com deg) ou sem unidade. Se $number não tiver nenhuma unidade, assume-se que está em rad.

  SCSS

  Sass

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

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

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

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

Retorna o tangente de $number.

$number deve ser um ângulo (sua unidade deve ser compatível com deg) ou sem unidade. Se $number não tiver nenhuma unidade, assume-se que está em rad.

  SCSS

  Sass

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

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

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

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

Retorna o arco-cosseno de $number em deg.

$number deve estar sem unidade.

  SCSS

  Sass

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

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

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

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

Retorna o arco-seno de $number

$number deve estar sem unidade.

  SCSS

  Sass

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

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

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

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

Retorna o arco-tangente de $number em deg.

$number deve estar sem unidade.

  SCSS

  Sass

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

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

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

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

Retorna o arco-tangente de dois argumentos de $y e $x em deg.

$y e $x devem ter unidades compatíveis ou ser sem unidade.

💡 Fato Divertido:

math.atan2($y, $x) é distinto de atan(math.div($y, $x)) porque preserva o quadrante do ponto em questão. Por exemplo, math.atan2(1, -1) corresponde ao ponto (-1, 1) e retorna 135deg. Em contrapartida, math.atan(math.div(1, -1)) e math.atan(math.div(-1, 1)) resolve primeiro para atan(-1), assim ambos retornam -45deg.

  SCSS

  Sass

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

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

Funções de UnidadeFunções de Unidade permalink

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

Retorna verdadeiro se $number1 e $number2 tiverem unidades compatíveis.

Se este retornar true, $number1 e $number2 pode seguramente ser adicionado, subtraído, e comparado. De outro modo, produzirá erros.

⚠️ Atenção!

O nome global desta função é comparable, mas quando foi adicionada ao módulo sass:math o nome foi mudado para compatible para transmitir mais claramente o que a função faz.

  SCSS

  Sass

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

  Sass 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

Retorna verdadeiro se $number não tiver nenhuma unidade.

  SCSS

  Sass

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

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

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

Retorna uma representação de sequência de caracteres da unidade do $number.

⚠️ Atenção!

Esta função está destinada para depuração; não é garantido que formato da sua saída seja consistente com as versões ou implementações da Sass.

  SCSS

  Sass

  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"

  Sass 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"

Outras FunçõesOutras Funções permalink

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

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

Retorna o resultado da divisão de $number1 por $number2.

Quaisquer unidades partilhada por ambos números serão canceladas. As unidades em $number1 que não estiverem em $number2 terminarão no numerador do valor retornado, e as unidades em $number2 que não estiverem em $number1 terminarão no seu denominador.

⚠️ Atenção!

Para fins de retro-compatibilidade, este retorna o exato mesmo resultado que o o operador / depreciado, inclusive concatenando duas sequências de caracteres com um carácter / entre elas. No entanto, este comportamento será removido eventualmente e não deveria ser usado em novas folhas de estilo.

  SCSS

  Sass

  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

  Sass 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

Converte um $number sem unidades (usualmente um decimal entre 0 e 1) para uma percentagem.

💡 Fato Divertido:

Esta função é idêntica ao $number * 100%.

  SCSS

  Sass

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

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

math.random($limit: null)
random($limit: null) //=> number

Se $limit for null, retorna um número decimal aleatório entre 0 e 1.

  SCSS

  Sass

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

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

Se $limit for um número maior do que ou igual à 1, retorna um número inteiro aleatório entre 1 e $limit.

⚠️ Atenção!

random() ignora as unidades no $limit. Este comportamento está depreciado e random($limit) retornará um inteiro aleatório com a mesma unidade que o argumento $limit.

  SCSS

  Sass

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

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

  SCSS

  Sass

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

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