Ir para o conteúdo principal

Declarando e Usando Variáveis

As variáveis customizadas de cada projeto são inseridas dentro de uma pasta chamada "vars". Todos os arquivos nessa pasta são automaticamente incluídos como variáveis no framework. No entanto, existe um arquivo específico dentro dessa pasta chamado _default.scss, onde variáveis especiais podem ser declaradas.

É importante frisar que variáveis especiais precisam ser declaradas entre aspas simples. Isso é exigido não só pelo manual de boas práticas do próprio SASS como também porque essas variáveis passam por vários tratamentos específicos e não funcionarão de outra maneira.

Sass Guidelines

Grupos de Variáveis

As variáveis são organizadas em grupos específicos pré-determinados para facilitar o gerenciamento e a aplicação consistente em todo o projeto. Alguns dos grupos comuns incluem:

Cores

As cores são frequentemente organizadas em grupos separados com diferentes propósitos, como cores de fundo, cores de texto, cores de borda, cores de gradiente, etc. Aqui está um exemplo de como os grupos de cores podem ser declarados:

//* Cores de Fundo
$c-backgrounds: (
    "c-bg-1": '#141616',
    "c-bg-2": '#FFFFFF',
);

//* Cores de Texto
$c-strings: (
    "c-s-1": '#FFFFFF',
    "c-s-2": '#999999',
);

//* Cores de Bordas
$c-borders: (
    "c-border-1": '#444444',
    "c-border-2": '#666666',
);

Temas

Os temas podem incluir uma variedade de cores específicas de design, como cores principais, secundárias, acentuadas, etc. Aqui está um exemplo de como os temas podem ser declarados:

//* Cores do Tema
$c-themes: (
    "c-t1-050": #effcfc,
    "c-t1-100": #d8f5f4,
    "c-t1-400": #42c1c7, //? Main
);

Uso das Variáveis

Depois de declaradas as variáveis, elas podem ser facilmente utilizadas em todo o projeto por meio de classes específicas. Por exemplo, para usar uma cor de fundo específica em um elemento HTML, podemos adicionar a classe correspondente:

<div class="bg(c-bg-1)"></div>

Se quisermos aplicar estilos diferentes para dispositivos móveis, podemos adicionar classes específicas para isso:

<div class="bg(c-bg-1) mob:bg(c-bg-2)"></div>

Isso permite que tenhamos controle granular sobre a aparência de elementos em diferentes dispositivos.

Funções de Classe

Além das classes específicas para aplicação de variáveis, também existem funções de classe para casos comportamentais diferentes. Por exemplo:

  • Alterar a fonte de alguma maneira: fnt(var)
  • Alterar a cor de fundo: bg(var)
  • Alterar a cor de texto: c(var)
  • Alterar a cor de borda: bc(var)
  • Adicionar efeitos visuais: fx(param,var) / fx(var)

Essas funções de classe permitem uma aplicação mais flexível e eficiente das variáveis CSS em todo o projeto.

Usando as variáveis dentro de outros arquivos SCSS

Todas as variáveis declaradas no arquivo _default.scss geram uma versão de variável CSS comum. Essa versão permite o uso das variáveis dentro de outros arquivos CSS do projeto.

Por exemplo, a variável c-bg-1, que pode ser diretamente usada no HTML como bg(c-bg-1), também pode ser utilizada no CSS da seguinte maneira:

background-color: var(--c-bg-1);

Isso oferece flexibilidade adicional para o uso das variáveis em diferentes contextos dentro do projeto.

Voltar ao topo