Operadores Numéricos

• <expression> + <expression> adiciona o primeiro valor da expressão ao segundo.
• <expression> - <expression> subtrai o primeiro valor da expressão do segundo.
• <expression> * <expression> multiplica o primeiro valor da expressão pelo segundo.
• <expression> % <expression> retorna o resto do valor da primeira expressão dividido pelo segundo. Este é conhecido como operador modulo.

@debug 10s + 15s; // 25s
@debug 1in - 10px; // 0.8958333333in
@debug 5px * 3px; // 15px*px
@debug 1in % 9px; // 0.0625in

@debug 10s + 15s  // 25s
@debug 1in - 10px  // 0.8958333333in
@debug 5px * 3px  // 15px*px
@debug 1in % 9px  // 0.0625in

Números sem unidade podem ser usados com números de qualquer unidade:

@debug 100px + 50; // 150px
@debug 4s * 10; // 40s

@debug 100px + 50  // 150px
@debug 4s * 10  // 40s

Números com unidades incompatíveis não podem ser usados com adição, subtração, ou modulo:

@debug 100px + 10s;
//     ^^^^^^^^^^^
// Error: Incompatible units px and s.

@debug 100px + 10s
//     ^^^^^^^^^^^
// Error: Incompatible units px and s.

Operadores UnáriosOperadores Unários permalink

Tu podes também escrever + e - como operadores unários, que recebem apenas um valor:

• +<expression> retorna o valor da expressão sem mudá-lo.
• -<expression> retorna a versão negativa do valor da expressão.

@debug +(5s + 7s); // 12s
@debug -(50px + 30px); // -80px
@debug -(10px - 15px); // 5px

@debug +(5s + 7s)  // 12s
@debug -(50px + 30px)  // -80px
@debug -(10px - 15px)  // 5px

@debug a-1; // a-1
@debug 5px-3px; // 2px
@debug 5-3; // 2
@debug 1 -2 3; // 1 -2 3

$number: 2;
@debug 1 -$number 3; // -1 3
@debug 1 (-$number) 3; // 1 -2 3

@debug a-1  // a-1
@debug 5px-3px  // 2px
@debug 5-3  // 2
@debug 1 -2 3  // 1 -2 3

$number: 2
@debug 1 -$number 3  // -1 3
@debug 1 (-$number) 3  // 1 -2 3

DivisãoDivisão permalink

Compatibilidade (math.div()):

Sass de Dart

since 1.33.0

LibSass

✗

Sass de Ruby

✗

Ao contrário dos outros operadores matemáticos, a divisão na Sass é feita com a função math.div(). Embora muitas linguagens de programação usem / como um operador de divisão, na CSS / é usada como um separador (como em font: 15px/32px ou hsl(120 100% 50% / 0.8)). Ainda que a Sass suporte o uso de / como um operador de divisão, este está depreciado e será removido numa versão futura.

Valores Separados Por BarraValores Separados Por Barra permalink

Por agora ainda que a Sass continue a suportar / como um operador de divisão, tem de ter uma maneira de desambiguar entre / como um separador e / como divisão. Para fazer isto funcionar, se dois números forem separados por /, a Sass imprimirá o resultado como separado por barra no lugar de dividido a menos que uma destas condições seja cumprida:

• Uma ou outra expressão não é nada senão um número literal.
• O resultado é armazenado numa variável ou retornado por uma função.
• A operação é envolvida por parêntesis, a menos que estes parêntesis estejam no lado de fora duma lista que contém a operação.
• O resultado é usado como parte duma outra operação (que não /).
• O resultado é retornado por um cálculo.

Tu podes usar list.slash() para forçar / ser usado como um separador.

@use "sass:list";

@debug 15px / 30px; // 15px/30px
@debug (10px + 5px) / 30px; // 0.5
@debug list.slash(10px + 5px, 30px); // 15px/30px

$result: 15px / 30px;
@debug $result; // 0.5

@function fifteen-divided-by-thirty() {
  @return 15px / 30px;
}
@debug fifteen-divided-by-thirty(); // 0.5

@debug (15px/30px); // 0.5
@debug (bold 15px/30px sans-serif); // bold 15px/30px sans-serif
@debug 15px/30px + 1; // 1.5

@use "sass:list";

@debug 15px / 30px  // 15px/30px
@debug (10px + 5px) / 30px  // 0.5
@debug list.slash(10px + 5px, 30px)  // 15px/30px

$result: 15px / 30px
@debug $result  // 0.5

@function fifteen-divided-by-thirty()
  @return 15px / 30px

@debug fifteen-divided-by-thirty()  // 0.5

@debug (15px/30px)  // 0.5
@debug (bold 15px/30px sans-serif)  // bold 15px/30px sans-serif
@debug 15px/30px + 1  // 1.5

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;
}