Operadores

A Sass suporta um punhado de operadores úteis para trabalhar com diferentes valores. Estes incluem operadores matemáticos padrão como + e *, bem como operadores para outros vários tipos:

  • == e != são usados para verificar se dois valores iguais.

  • +, -, *, /, e % têm seus habituais significado matemáticos para números, com comportamentos especiais para unidades que condizem com o uso de unidades na matemática científica.

  • <, <=, >, e >= verificam se dois números maiores ou menores que um ou outro.

  • and, or, e not têm o habitual comportamento booleano. A Sass considera todo valor “verdadeiro” exceto para false e null.

  • +, -, e / podem ser usadas para concatenar sequências de caracteres.

⚠️ Atenção!

No princípio da história da Sass, ela adicionou suporte para operações matemática sobre as cores. Estas operações operavam sobre cada canal de RGB das cores separadamente, assim adicionando duas cores produziria um cor com a soma de seus canais de vermelho de acordo com o seu canal de vermelho e assim por diante.

Este comportamento não era muito útil, já que sua aritmética de RGB de canal por canal não correspondia bem a como os humanos percebem a cor. As funções de cor foram adicionadas as quais são mais úteis, e os operadores de cor foram depreciados. Eles continuam a ser suportados na LibSass e Sass de Ruby, mas produziram avisos e os utilizadores são fortemente encorajados a evitá-los.

Ordem das OperaçõesOrdem das Operações permalink

A Sass tem uma linda ordem de operações padrão, do mais apertado até o mais desapertado:

  1. Os operadores unários not, +, -, e /.
  2. Os operadores *, /, e %.
  3. Os operadores + e -.
  4. Os operadores >, >=, < e <=.
  5. Os operadores == e !=.
  6. O operador and.
  7. O operador or.
  8. O operador =, quando estiver disponível.

SCSS Syntax

@debug 1 + 2 * 3 == 1 + (2 * 3); // true
@debug true or false and false == true or (false and false); // true

Sass Syntax

@debug 1 + 2 * 3 == 1 + (2 * 3)  // true
@debug true or false and false == true or (false and false)  // true

ParêntesesParênteses permalink

Tu podes controlar explicitamente a ordem das operações usando parêntesis. Uma operação dentro de parêntesis é sempre avaliada antes de quaisquer operadores fora dos parêntesis. Os parêntesis podem mesmo ser encaixados, no qual caso os parêntesis mais íntimo serão avaliados primeiro:

SCSS Syntax

@debug (1 + 2) * 3; // 9
@debug ((1 + 2) * 3 + 4) * 5; // 65

Sass Syntax

@debug (1 + 2) * 3  // 9
@debug ((1 + 2) * 3 + 4) * 5  // 65

Único Sinal de IgualdadeÚnico Sinal de Igualdade permalink

A Sass suporta um operador especial = que é apenas permitido nos argumentos de função, que cria apenas uma sequência de caracteres sem aspas com os seus dois operandos separados pelo =. Isto existe por questões de retro-compatibilidade com a sintaxe muito antiga usada apenas no Internet Explorer.

SCSS Syntax

.transparent-blue {
  filter: chroma(color=#0000ff);
}

Sass Syntax

.transparent-blue
  filter: chroma(color=#0000ff)

CSS Output

.transparent-blue {
  filter: chroma(color=#0000ff);
}