Operações do Sass

Operações com números

Além dos operadores relacionais de igualdade, há suporte aos operadores > (maior que), < (menor que), >= (maior ou igual a) e <= (menor ou igual a). Os operadores relacionais são mostrados em exemplos no tutorial de Diretivas de Controle.

Também há suporte a operações aritméticas: + (adição), - (subtração), * (multiplicação), / (divisão) e % (módulo). As unidades são preservadas nas operações:

.comments {
  height: 200px + 50px;
}

.comments {
  height: 250px; }

Como as unidades são preservadas nas operações, quando são feitas multiplicações com unidades, se os dois operandos tem unidades, você vai ter unidades quadradas. Unidades quadradas não existem no CSS, então se você fizer isso, vai ocorrer um erro. Exemplo:

.comments {
  height: 10em * 5em;
}

A solução é deixar um dos operandos sem unidade:

.comments {
  height: 10em * 5;
}

.comments {
  height: 50em; }

A divisão é um caso especial, porque a /, que é o operador da divisão, também é usada para separar números. Isso ocorre, por exemplo, na propriedade font:

article {
  font: 1em/1.5em;
}

article {
  font: 1em/1.5em; }

A regra acima define a font-size e depois a line-height do <article> usando a / para separar os dois. Nesse caso, a / é interpretada como separador de dois números. Para evitar essa interpretação, você pode colocar parênteses:

article {
  font: (1em/1.5);
}

article {
  font: 0.66667em; }

A unidade foi colocada apenas no primeiro operando porque se colocasse nos dois, as unidades deles se cancelariam. E é necessário colocar a unidade no primeiro operando ao invés do segundo. Se isso não for feito, um erro acontece.

Alternativamente, você também pode armazenar essa expressão em uma variável. Em variáveis, a / é interpretada como operador de divisão, por padrão:

$article-font-size: 1em/1.5;

article{
  font: $article-font-size;
}

article {
  font: 0.66667em; }

Os parênteses também podem ser evitados se apenas um dos operandos ou parte de um deles é armazenada em uma variável ou retornado por uma função (veremos funções depois):

$a: 2em;

article{
  font: $a/3;
}

article {
  font: 0.66667em; }

Se você quiser que a / seja usada como separador de números nesse caso, você pode usar um recurso chamado interpolação, que usa a seguinte sintaxe: #{$variável}. Exemplo:

$a: 1em;
$b: 1.5em;

article{
  font: #{$a}/#{$b};
}

article {
  font: 1em/1.5em; }

Operações com strings

É possível unir duas strings usando o operador +, que é o operador de concatenação de strings:

$indice: 4;

div:before {
  content: "Texto " + $indice;
}

div:before {
  content: "Texto 4"; }

A variável acima também poderia ter sido colocada usando a interpolação, que é usada para colocar valores dinâmicos (expressões, variáveis e outros) em uma string:

$indice: 4;

div:before {
  content: "Texto #{$indice}";
}

div:before {
  content: "Texto 4"; }

A interpolação também pode ser usada em seletores e em nomes de propriedades. Exemplo:

$class: lead;
$property: font-size;

.#{$class} {
  #{$property}: 1.2em;
}

.lead {
  font-size: 1.2em; }

Operações com cores

Você pode fazer com as cores as mesmas operações aritméticas que você pode fazer com os números. Exemplo:

p {
  background-color: #bbb - #333;
}

p {
  background-color: #888888; }

Como você pode ver no CSS gerado, as operações são feitas entre cada componente da cor (vermelho, verde e azul) individualmente.

A cor não precisa estar no formato hexadecimal. Ela pode estar em outro formato, como rgb. Inclusive, os operandos podem estar em formatos diferentes:

p {
  background-color: #bbb - rgb(20, 20, 20);
}

p {
  background-color: #a7a7a7; }

No caso de formatos que contém o canal alfa, como o rgba, o canal alfa deve ser o mesmo caso ele esteja nos dois operandos. Ele permanece inalterado depois da operação.

p {
  background-color: rgba(20, 20, 20, 0.5) * 2;
}

p {
  background-color: rgba(40, 40, 40, 0.5); }

Como você pode ver no último exemplo, também dá pra fazer operações entre uma cor e um número.

Para mudar o valor do canal alfa, podem ser usadas algumas funções que são vistas no tutorial de Funções. Não é possível operar uma cor que tem um canal alfa com uma que não tenha:

p {
  background-color: rgba(20, 20, 20, 0.5) + #a24908;
}

Operadores lógicos

Operadores lógicos são cobertos no tutorial de Diretivas de Controle.

Precedência de operadores

A ordem na qual as operações de Sass ocorre considera primeiro a precedência dos operadores e depois a associatividade deles. Se você é programador, já deve estar acostumado com esse comportamento.

Basicamente, operações com maior precedência são realizadas primeiro, mesmo que elas apareçam depois de outras operações. Quando todas as operações tem a mesma precedência, aí sim as operações seguem a associatividade, que na maioria dos casos é da esquerda para a direita.

Se você achou a explicação confusa, depois dos exemplos vai ficar muito mais fácil de entender. Considere a seguinte regra:

p {
  margin-top: 10em - 6em / 2;
}

p {
  margin-top: 7em; }

Como você viu, o resultado é 7em, e não 2em. Isso ocorreu porque os operadores de multiplicação, divisão e módulo tem maior precedência do que os operadores de adição e subtração. Por isso, a subtração foi feita depois da divisão, mesmo aparecendo antes dela.

Mas, e se quiséssemos fazer a subtração primeiro? Nesse caso, é necessário colocar a subtração entre parênteses. Como os parênteses são um operador que tem precedência maior do que qualquer operador aritmético, a subtração é feita primeiro. Exemplo:

p {
  width: (10em - 6em) / 2;
}

p {
  width: 2em; }