Articles
Introdução ao SASS/SCSS
A função `if` no SASS

A função `if` no SASS

Este artigo explica a função if no SASS.

Vamos percorrer tudo, do básico da função if a técnicas avançadas, passo a passo.

YouTube Video

A função if no SASS

A função if() é uma função condicional simples fornecida pelo SASS que retorna um de dois valores com base em uma condição booleana. Ela é semelhante ao operador ternário do JavaScript.

Sintaxe

A sintaxe é a seguinte:.

1// if(condition, trueValue, falseValue)
  • Se condition for verdadeiro, retorna trueValue; se for falso, retorna falseValue.

Uso Básico

Por exemplo, você pode usar a função if() para alterar as cores de fundo e do texto dependendo se o tema é escuro ou claro.

Código de Exemplo 

1$theme: "dark";
2
3$background-color: if($theme == "dark", black, white);
4$text-color: if($theme == "dark", white, black);
5
6body {
7  background-color: $background-color;
8  color: $text-color;
9}
  • Se a variável $theme for "dark", o fundo se torna preto com texto branco; se for "light", o fundo se torna branco com texto preto.

O CSS gerado 

1body {
2  background-color: black;
3  color: white;
4}
  • Como a variável $theme é "dark", o fundo é preto com texto branco.

Diferenças entre a declaração @if e a função if()

O Sass fornece uma declaração @if e uma função if() para ramificação condicional, mas elas são usadas para finalidades diferentes.

Código de Exemplo 

 1$theme: "dark";
 2
 3// `@if` statement: Compile-time branching (syntax level)
 4$background-color: null;
 5@if $theme == "dark" {
 6  $background-color: black;
 7} @else if $theme == "light" {
 8  $background-color: white;
 9} @else {
10  $background-color: gray;
11}
12
13// `if()` function: Returns a value (expression level)
14$text-color: if($theme == "dark", white, black);
15
16body {
17  background-color: $background-color;
18  color: $text-color;
19}
  • A declaração @if controla qual código é gerado no momento da compilação do Sass.
  • Por outro lado, a função if() retorna um valor e é usada para alternar valores dinamicamente dentro de expressões.

O CSS gerado 

1body {
2  background-color: black;
3  color: white;
4}
  • Neste exemplo, como $theme é "dark", são aplicados um fundo preto e uma cor de texto branca.
  • As duas principais diferenças são que a declaração @if controla a estrutura e a função if() retorna um valor.

Usando funções if aninhadas

Quando você precisa de lógica condicional complexa, pode aninhar funções if.

Código de Exemplo 

 1$theme: "custom";
 2$custom-color: blue;
 3
 4$background-color: if(
 5  $theme == "dark",
 6  black,
 7  if(
 8    $theme == "light",
 9    white,
10    $custom-color
11  )
12);
13
14body {
15  background-color: $background-color;
16}
  • Se $theme for "dark", retorna preto; se for "light", retorna branco; caso contrário, retorna o valor padrão ($custom-color).

O CSS gerado 

1body {
2  background-color: blue;
3}
  • Como a variável $theme é custom, a cor de fundo é azul.

Casos de uso práticos

Alternância de tema

Abaixo está um exemplo que altera os estilos do botão com base no tema.

1$theme: "dark";
2
3.button {
4  background-color: if($theme == "dark", #333, #fff);
5  color: if($theme == "dark", #fff, #333);
6  border: 1px solid if($theme == "dark", #444, #ccc);
7}
  • Este código é um exemplo condicional em SASS que alterna as cores de fundo, texto e borda de um botão com base no valor da variável $theme. A função if() é usada para definir dinamicamente estilos para temas escuros e claros.

O CSS gerado 

1.button {
2  background-color: #333;
3  color: #fff;
4  border: 1px solid #444;
5}
  • Ao alternar o tema, você pode alterar de forma uniforme o design geral.

Exemplo avançado: definindo dinamicamente o contraste de cor

Vamos ver um exemplo que define automaticamente a cor do texto com base na cor de fundo.

Código de Exemplo 

 1@use "sass:color";
 2
 3$background-color: #000;
 4
 5$text-color: if(
 6  color.channel($background-color, "lightness", $space: hsl) > 50%,
 7  black,
 8  white
 9);
10
11body {
12  background-color: $background-color;
13  color: $text-color;
14}
  • A função color.channel() é usada para obter a luminosidade (lightness) da cor de fundo. Se esse valor for maior que 50%, o preto é escolhido; se for menor, o branco é escolhido como cor do texto, otimizando automaticamente o contraste com o fundo.

O CSS gerado 

1body {
2  background-color: #000;
3  color: white;
4}
  • Ao usar a função if(), você pode implementar estilos flexíveis que levam em conta a acessibilidade do design, como ajustar o contraste.

Combinando com @function

Usar a função if dentro de uma @function permite um design de estilos ainda mais flexível.

Código de Exemplo 

 1@function theme-color($theme, $type) {
 2  @return if(
 3    $theme == "dark",
 4    if(
 5      $type == "background",
 6      black,
 7      white
 8    ),
 9    if(
10      $type == "background",
11      white,
12      black
13    )
14  );
15}
16
17body {
18  background-color: theme-color("dark", "background");
19  color: theme-color("dark", "text");
20}
  • Este código demonstra o uso de if() dentro de uma @function para retornar cores adequadas com base no tema e no tipo de cor. Isso possibilita um design de estilos consistente e reutilizável para cada tema.

O CSS gerado 

1body {
2  background-color: black;
3  color: white;
4}
  • Ao criar e usar funções auxiliares que aproveitam a função if(), você pode melhorar a manutenibilidade de todo o projeto.

Notas

  1. A função if não pode ser usada com valores dinâmicos Como o próprio CSS é uma linguagem estática, a função if determina os valores no momento em que o SASS é compilado. Para lógica condicional em tempo de execução, é necessário usar JavaScript.

  2. Priorize a legibilidade Como as funções if aninhadas podem se tornar complexas e prejudicar a legibilidade, você pode usar @mixin e @function do SASS conforme necessário para organizar seu código.

Conclusão

A função if do SASS é uma ferramenta poderosa que retorna valores diferentes dependendo das condições. Ela é útil não apenas para condicionais simples, mas também em muitos cenários, como alternância de tema e configurações dinâmicas de estilo. No entanto, ao lidar com condições complexas, preste atenção à legibilidade e aproveite @mixin e @function para melhorar a manutenibilidade.

Ao dominar a função if, você pode alcançar um design de estilos mais eficiente e flexível.

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

Condicionais no SASS