Operadores no SASS

Este artigo explica os operadores no SASS.

Vamos explicar os operadores no SASS com exemplos práticos.

YouTube Video

Operadores no SASS

Os operadores do SASS incluem operações numéricas, operações de comparação, operações lógicas e manipulações de strings.

Operações Aritméticas (adição, subtração, multiplicação, divisão, módulo)

O SASS suporta aritmética padrão, mas a divisão / pode ser confusa com a / do CSS, por isso é recomendado usar math.div(). Os números podem ter unidades, e as operações só são possíveis entre unidades compatíveis.

Abaixo estão exemplos de aritmética simples e uso do módulo math.

 1@use "sass:math";
 2
 3$base: 16px;
 4$gutter: 8px;
 5
 6/* Addition and multiplication (allowed since both units are px) */
 7.container {
 8  width: $base + $gutter * 3; // -> 40px
 9}
10
11/* Use math.div() for division (/ is deprecated and triggers a warning) */
12.half {
13  padding: math.div($base, 2); // -> 8px
14}

• Este código é um exemplo de adição e multiplicação com a unidade px, e divisão usando math.div().
• Unidades incompatíveis como 10px + 2em resultarão em erro ou resultados inesperados. Unifique as unidades ou use as funções unit() e unitless().

Manipulação e conversão automática de unidades

O SASS lida com números com unidades, e as regras das unidades para os resultados de cálculos seguem as regras físicas gerais. Por exemplo, px/px se torna sem unidade. Tenha cuidado com o gerenciamento de unidades ao usar a função unit() ou após math.div().

Abaixo estão exemplos mostrando como lidar com a mistura de valores com e sem unidade.

1$width: 100px;
2$ratio: 0.5;
3
4.box {
5  /* Multiply width by a ratio (multiplying by a unitless value is fine) */
6  width: $width * $ratio; // -> 50px
7}
8
9/* If you want to remove the unit, combine it with math.div() for the operation */

• Multiplicar valores com e sem unidade funciona como esperado, mas tenha atenção à unidade resultante (ou à ausência dela) ao dividir.

Operadores de Comparação (==, !=, <, >, <=, >=)

O SASS possui operadores de comparação, que podem ser usados para ramificações em condicionais (@if) e mixins. A comparação de tipos complexos como cores e listas segue suas próprias regras. Observe que comparações de cores diferem dependendo do espaço de cor.

Abaixo está um exemplo que compara dois números e altera o estilo baseado nisso.

1$breakpoint: 768px;
2
3.container {
4  @if $breakpoint >= 768px {
5    max-width: 1200px;
6  } @else {
7    max-width: 100%;
8  }
9}

• Operadores de comparação podem ser combinados com @if para regras de estilos responsivas e condicionais.

Operações Lógicas (and, or, not)

O SASS suporta and, or e not. Use and/or para combinar múltiplas condições. A precedência e ordem de avaliação podem ser explicitadas usando parênteses.

Abaixo está um exemplo de como lidar com condições complexas usando operadores lógicos.

 1$mobile: false;
 2$logged-in: true;
 3
 4.notice {
 5  @if $logged-in and not $mobile {
 6    display: block;
 7  } @else {
 8    display: none;
 9  }
10}

• A precedência de and e or pode ser esclarecida com parênteses. Para condições complexas, o uso de parênteses ajuda a manter a legibilidade e a segurança.

Operações com Strings — Concatenação e Interpolação

No SASS, a concatenação de strings pode ser feita usando + ou interpolação #{}. O resultado do operador + depende se a string à esquerda é entre aspas ou não, portanto usar a interpolação previsível com #{} é mais seguro.

Abaixo estão exemplos de concatenação e interpolação.

 1@use "sass:string";
 2
 3$base: "icon-";
 4$variant: string.unquote("arrow");
 5
 6.icon {
 7  /* Concatenation using + (old style) */
 8  &--old { content: $base + $variant; } // -> icon-arrow
 9
10  /* Interpolation is more reliable */
11  &--new { content: "#{$base}#{$variant}"; } // -> icon-arrow
12}
13
14/* Interpolation is useful for generating selector names, URLs, or animation names */
15@keyframes slide-#{$variant} {
16  from { transform: translateX(0); }
17  to   { transform: translateX(100%); }
18}

• Usar interpolação #{} evita problemas com aspas e inserção indesejada de espaços.

Aritmética com cores (obsoleto)

No passado, o SASS suportava 'aritmética de cores', que permitia adicionar ou subtrair números às cores. No entanto, a aritmética de cores está agora obsoleta e você deve usar funções do módulo sass:color para manipular cores.

Abaixo estão exemplos que demonstram que a aritmética direta de cores está obsoleta e sugerem alternativas.

 1/* Deprecated (old code example – no longer works or recommended) */
 2/* background: $base-color + 10; */
 3
 4@use "sass:color";
 5
 6$base: #336699;
 7
 8.bg {
 9  /* For example, to increase lightness, use color.scale() or color.adjust() */
10  /* Safe manipulation based on color space */
11  background: color.scale($base, $lightness: 20%);
12  /* Or make it lighter by mixing white */
13  background: color.mix(white, $base, 20%);
14}

• Se você quiser manipular cores, use funções do módulo sass:color.

Parênteses e Precedência de Operadores

Use parênteses para controlar a ordem de avaliação nas operações. Parênteses são sempre avaliados antes das operações externas a eles. Use parênteses em expressões complexas para manter a legibilidade.

Abaixo estão exemplos esclarecendo a ordem de avaliação com parênteses.

1@debug (1 + 2) * 3; // 9
2@debug 1 + 2 * 3;   // 7 (multiplication first)

• Assim como na matemática, regras de precedência se aplicam, então utilize parênteses para garantir que os cálculos ocorram na ordem pretendida.

Resumo

Ao usar operadores no SASS, é importante escrever o código pensando na compatibilidade futura e na legibilidade. Em expressões complexas, esclareça a ordem do cálculo usando parênteses e priorize a legibilidade do código.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video