Números

@debug 100; // 100
@debug 0.8; // 0.8
@debug 16px; // 16px
@debug 5px * 2px; // 10px*px (read "square pixels")

@debug 100  // 100
@debug 0.8  // 0.8
@debug 16px  // 16px
@debug 5px * 2px  // 10px*px (read "square pixels")

Os números da Sass suportam os mesmos formatos que os números da CSS, incluindo a notação científica, que é escrita com um e entre o número e a sua potência de 10. Uma vez que o suporte para notação científica nos navegadores tem sido historicamente irregular, a Sass sempre compila-o para números completamente expandidos:

@debug 5.2e3; // 5200
@debug 6e-2; // 0.06

@debug 5.2e3  // 5200
@debug 6e-2  // 0.06

UnidadesUnidades permalink

A Sass tem poderoso suporte para manipulação de unidades baseada em como os cálculos de unidade do mundo real funcionam. Quando dois números forem multiplicados, suas unidades também são multiplicadas. Quando um número é dividido por um outro, o resultado recebe as unidades do seu numerador do primeiro número e as unidades do seu denominador do segundo número. Um número pode ter qualquer número de unidades no numerador e/ou no denominador.

@debug 4px * 6px; // 24px*px (read "square pixels")
@debug math.div(5px, 2s); // 2.5px/s (read "pixels per second")

// 3.125px*deg/s*em (read "pixel-degrees per second-em")
@debug 5px * math.div(math.div(30deg, 2s), 24em);

$degrees-per-second: math.div(20deg, 1s);
@debug $degrees-per-second; // 20deg/s
@debug math.div(1, $degrees-per-second); // 0.05s/deg

@debug 4px * 6px  // 24px*px (read "square pixels")
@debug math.div(5px, 2s)  // 2.5px/s (read "pixels per second")

// 3.125px*deg/s*em (read "pixel-degrees per second-em")
@debug 5px * math.div(math.div(30deg, 2s), 24em)

$degrees-per-second: math.div(20deg, 1s)
@debug $degrees-per-second  // 20deg/s
@debug math.div(1, $degrees-per-second)  // 0.05s/deg

A Sass converterá automaticamente entre unidades compatíveis, ainda que a unidade que escolherá para o resultado dependa de qual implementação de Sass estás a usar. Se experimentares combinar unidades incompatíveis, como 1in + 1em, a Sass lançará um erro.

// A CSS uma polegada como 96 pixeis.
@debug 1in + 6px; // 102px or 1.0625in

@debug 1in + 1s;
//     ^^^^^^^^
// Error: Incompatible units s and in.

// A CSS uma polegada como 96 pixeis.
@debug 1in + 6px  // 102px or 1.0625in

@debug 1in + 1s
//     ^^^^^^^^
// Error: Incompatible units s and in.

De acordo com os cálculos de unidade no mundo real, ase o numerador contém unidades que são compatíveis com as unidades no denominador (como math.dv(96px, 1in)), anular-se-ão. Isto torna fácil definir uma proporção que podes usar ou converter entre unidades. No exemplo abaixo, definimos a velocidade desejada para um segundo por 50 pixeis, e depois multiplicamos este pelo número de pixeis que a transição ocupa para receber o tempo deveria levar.

@use 'sass:math';

$transition-speed: math.div(1s, 50px);

@mixin move($left-start, $left-stop) {
  position: absolute;
  left: $left-start;
  transition: left ($left-stop - $left-start) * $transition-speed;

  &:hover {
    left: $left-stop;
  }
}

.slider {
  @include move(10px, 120px);
}

@use 'sass:math'

$transition-speed: math.div(1s, 50px)

@mixin move($left-start, $left-stop)
  position: absolute
  left: $left-start
  transition: left ($left-stop - $left-start) * $transition-speed

  &:hover
    left: $left-stop



.slider
  @include move(10px, 120px)

.slider {
  position: absolute;
  left: 10px;
  transition: left 2.2s;
}
.slider:hover {
  left: 120px;
}

PrecisãoPrecisão permalink

Compatibilidade (Padrão do Digito 10):

Sass de Dart

✓

LibSass

✗

Sass de Ruby

since 3.5.0

▶

Os números da Sass suportam até 10 dígitos de precisão depois do ponto decimal. Isto significa algumas coisas diferentes:

• Apenas os primeiros dez dígitos de um número depois do ponto decimal será incluído na CSS gerada.

• Operações como == e >= considerarão dois números equivalentes se forem o mesmo até o décimo dígito depois do ponto decimal.

• Se um número for menor do que 0.0000000001 longe de um inteiro, é considerado como um inteiro para os fins de funções como list.nth() que exigem argumentos inteiros.

@debug 0.012345678912345; // 0.0123456789
@debug 0.01234567891 == 0.01234567899; // true
@debug 1.00000000009; // 1
@debug 0.99999999991; // 1

@debug 0.012345678912345  // 0.0123456789
@debug 0.01234567891 == 0.01234567899  // true
@debug 1.00000000009  // 1
@debug 0.99999999991  // 1