Condicionais no SASS

Este artigo explica as condicionais no SASS.

Explicamos claramente tudo, do básico aos usos avançados das condicionais com as diretivas @if, @else if e @else, com exemplos práticos.

YouTube Video

Condicionais no SASS

SASS é uma linguagem de folhas de estilo que estende o CSS, e você pode controlar os estilos de forma flexível usando condicionais. No SASS, você pode usar @if, @else if e @else para alternar a saída dos estilos em tempo de compilação.

Sintaxe básica de condicionais

As condicionais básicas no SASS são escritas com a seguinte sintaxe.

1@if condition {
2  // Code executed when the condition is true
3} @else if condition {
4  // Code executed when another condition is true
5} @else {
6  // Code executed when all conditions are false
7}

• @if avalia a primeira condição e, se for falsa, os blocos @else if ou @else são avaliados na ordem.

Exemplo simples de condicional

No exemplo a seguir, a cor de fundo alterna com base na variável $theme.

 1$theme: "dark";
 2
 3body {
 4  @if $theme == "dark" {
 5    background-color: #333;
 6    color: #fff;
 7  } @else if $theme == "light" {
 8    background-color: #fff;
 9    color: #000;
10  } @else {
11    background-color: #f0f0f0;
12    color: #333;
13  }
14}

CSS compilado

1body {
2  background-color: #333;
3  color: #fff;
4}

• Quando $theme é "dark", são aplicados um fundo escuro e a cor do texto branca.

Combinando condicionais com cálculos

As condicionais lidam não apenas com comparações de strings e cores, mas também com cálculos numéricos.

1$width: 1200px;
2
3.container {
4  @if $width > 1000px {
5    max-width: 1200px;
6  } @else {
7    max-width: 800px;
8  }
9}

CSS compilado

1.container {
2  max-width: 1200px;
3}

• Comparações numéricas também são possíveis e, quando $width ultrapassa 1000px, é gerado max-width: 1200px.

Condicionais aninhadas

Ao aninhar condicionais, você pode expressar condições complexas.

 1$theme: "dark";
 2$size: "large";
 3
 4button {
 5  @if $theme == "dark" {
 6    background-color: #000;
 7    color: #fff;
 8
 9    @if $size == "large" {
10      padding: 20px;
11    } @else {
12      padding: 10px;
13    }
14  } @else {
15    background-color: #fff;
16    color: #000;
17
18    @if $size == "large" {
19      padding: 15px;
20    } @else {
21      padding: 8px;
22    }
23  }
24}

CSS compilado

1button {
2  background-color: #000;
3  color: #fff;
4  padding: 20px;
5}

• O aninhamento de condicionais permite estilizar com base tanto no tema quanto no tamanho.

Usando condicionais em funções personalizadas

Usar condicionais dentro de funções personalizadas pode melhorar a reutilização.

 1@function adjust-color($theme) {
 2  @if $theme == "dark" {
 3    @return #333;
 4  } @else if $theme == "light" {
 5    @return #fff;
 6  } @else {
 7    @return #ccc;
 8  }
 9}
10
11.card {
12  background-color: adjust-color("dark");
13}

CSS compilado

1.card {
2  background-color: #333;
3}

• Ao encapsular condicionais em funções, você aumenta a reutilização e a manutenibilidade.

Exemplo prático - Alternando o design

Vamos ver um exemplo de alternar o design geral com base em certas condições.

 1$theme: "light";
 2
 3body {
 4  font-family: Arial, sans-serif;
 5
 6  @if $theme == "dark" {
 7    background-color: #121212;
 8    color: #e0e0e0;
 9  } @else if $theme == "light" {
10    background-color: #f9f9f9;
11    color: #333;
12  } @else {
13    background-color: #fff;
14    color: #000;
15  }
16}
17
18header {
19  @if $theme == "dark" {
20    border-bottom: 1px solid #333;
21  } @else {
22    border-bottom: 1px solid #ccc;
23  }
24}

CSS compilado

1body {
2  font-family: Arial, sans-serif;
3  background-color: #f9f9f9;
4  color: #333;
5}
6
7header {
8  border-bottom: 1px solid #ccc;
9}

• Você pode alternar dinamicamente o esquema de cores de toda a página de acordo com a variável de tema.

Observações e boas práticas

Ao usar condicionais do SASS, considere os seguintes pontos.

1. Mantenha as condicionais simples

   Aninhamentos complexos prejudicam a legibilidade; portanto, utilizar funções e mixins ajuda a manter tudo simples.

2. Abstraia com variáveis e funções

   Se você usa condições semelhantes em vários lugares, consolidá-las em variáveis ou funções melhora a manutenibilidade.

3. Evite lógica excessiva

   Unifique as regras de design tanto quanto possível e evite o uso excessivo de condicionais.

Conclusão

As condicionais no SASS são uma ferramenta muito eficaz para criar estilos flexíveis e dinâmicos. Aqui, explicamos tudo passo a passo, do básico aos exemplos práticos. Ao usar condicionais em projetos reais, projete com foco em código reutilizável, tomando cuidado para não complicar demais.

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