1. O Que São Variáveis no SCSS?
No SCSS, variáveis são usadas para armazenar valores reutilizáveis que podem ser aplicados em diferentes partes do seu código. Elas permitem que você defina um valor uma única vez e o utilize em vários lugares, facilitando a alteração de estilos de forma rápida e eficiente. Ao invés de repetir valores como cores ou tamanhos de fonte em várias regras de estilo, você pode simplesmente referenciar a variável correspondente.
// Exemplo de variável no SCSS
$cor-primaria: #3498db;
$padding-padrao: 16px;
body {
background-color: $cor-primaria;
padding: $padding-padrao;
}
No exemplo acima, a cor de fundo e o padding são definidos usando variáveis, o que torna o código mais limpo e fácil de modificar futuramente.
2. Declaração de Variáveis no SCSS
As variáveis no SCSS são definidas com o prefixo $. Depois de declarar uma variável, você pode utilizá-la em qualquer lugar do seu código. Veja como declarar e usar variáveis de forma eficiente:
// Declaração de variáveis
$cor-secundaria: #2ecc71;
$font-size-base: 14px;
$espacamento-grande: 32px;
// Usando as variáveis
h1 {
color: $cor-secundaria;
font-size: $font-size-base * 2; // Usando cálculos com variáveis
margin-bottom: $espacamento-grande;
}
Você pode usar variáveis para definir cores, tamanhos de fonte, margens, padding e até mesmo realizar operações aritméticas para ajustar valores dinamicamente.
3. Tipos de Valores que Podem Ser Armazenados em Variáveis
O SCSS permite que você armazene diferentes tipos de valores em variáveis, o que oferece muita flexibilidade. Aqui estão os principais tipos que podem ser usados:
- Cores: Valores de cores em hexadecimal, RGB, RGBA ou HSL.
- Unidades de Medida: Pixels, em, rem, porcentagens e mais.
- Strings: Textos simples, úteis para fontes ou seletores.
- Números: Valores numéricos sem unidade, que podem ser usados em cálculos.
- Booleans: Verdadeiro (
true) ou falso (false).
// Exemplo de diferentes tipos de variáveis
$azul-claro: #3498db;
$padding-padrao: 20px;
$fonte-principal: 'Roboto', sans-serif;
$media-width: 768px;
$usar-borda: true;
4. Uso de Variáveis em Cálculos
Um dos recursos mais poderosos do SCSS é a capacidade de realizar cálculos com variáveis. Você pode combinar valores e realizar operações como adição, subtração, multiplicação e divisão para gerar novos valores.
// Cálculos com variáveis no SCSS
$largura-base: 100px;
$largura-dobrada: $largura-base * 2;
.elemento {
width: $largura-dobrada; // Resultado será 200px
padding: $largura-base / 2; // Resultado será 50px
}
Esses cálculos tornam o código muito mais dinâmico, permitindo ajustes automáticos em todo o design com base em algumas variáveis.
5. Variáveis Globais e Locais
As variáveis no SCSS podem ser globais ou locais. Variáveis globais são acessíveis em todo o arquivo, enquanto variáveis locais são limitadas ao escopo onde foram definidas, como dentro de um mixin ou de um bloco de código específico.
// Variável global
$cor-principal: #e74c3c;
@mixin exemplo-mixin {
// Variável local dentro do mixin
$cor-local: #8e44ad;
background-color: $cor-local;
}
body {
background-color: $cor-principal;
@include exemplo-mixin;
}
No exemplo acima, a variável $cor-local só está disponível dentro do mixin, enquanto $cor-principal pode ser usada em qualquer parte do arquivo.
6. Uso de Variáveis com Temas
As variáveis também são muito úteis na criação de temas. Você pode definir diferentes conjuntos de variáveis para diferentes temas e alternar entre eles com facilidade.
// Definindo temas com variáveis
$tema-claro-bg: #ffffff;
$tema-claro-texto: #333333;
$tema-escuro-bg: #333333;
$tema-escuro-texto: #ffffff;
body.tema-claro {
background-color: $tema-claro-bg;
color: $tema-claro-texto;
}
body.tema-escuro {
background-color: $tema-escuro-bg;
color: $tema-escuro-texto;
}
Essa abordagem permite que você alterne entre temas claro e escuro, ou outros estilos personalizados, de forma fácil e rápida, apenas ajustando as variáveis.
Conclusão
O uso de variáveis no SCSS é uma das melhores práticas para escrever código CSS mais eficiente, dinâmico e fácil de manter. Ao aproveitar o poder das variáveis, você pode criar estilos mais consistentes e flexíveis, além de reduzir o tempo gasto em modificações futuras. Aprender a utilizar variáveis no SCSS é essencial para qualquer desenvolvedor front-end que busca melhorar seu fluxo de trabalho e criar projetos escaláveis.