Variáveis CSS são melhores que loops de Sass?

Variáveis CSS são melhores que loops de Sass? Não necessariamente, mas veja este exemplo prático com as 2 tecnologias para atingir o mesmo objetivo em CSS.

Ir para o artigo

Variáveis CSS não necessariamente são melhores que loops de Sass. Mas, para ajudar o entendimento de cada um, veja um exemplo prático usando as 2 tecnologias para atingir o mesmo objetivo visual usando CSS.

Ao projetar componentes, geralmente precisamos usar a mesma estrutura de um componente, mas alteramos o plano de fundo ou a cor do texto com base em um tema ou algo assim.

Por exemplo, em um alerta, podemos precisar de um estilo de aviso, um estilo de erro e um estilo de sucesso — cada um deles pode ser um pouco diferente, desse jeito:

Existem algumas maneiras de resolver isso usando CSS, mas, se você quisesse resolver isso há alguns anos, talvez a melhor (e única) indicação teria sido Sass maps.

Uma possibilidade teria sido, primeiro, começar com os estilos de alerta básicos e, depois, criar um mapa que conteria todos os dados:

Então, seria possível percorrer esses dados para alterar os principais estilos de alerta, assim:

Um pouquinho complicado, certo? Isso produziria classes como .alert-error.alert-success e .alert-warning, cada um dos quais teria um monte de CSS dentro deles que substitui os estilos de alerta padrão.

O que produziria algo parecido com:

Contudo, o uso de Sass maps e o looping de todos esses dados pode se tornar pesado e extraordinariamente difícil de ler.

Como seria possível manter o código fácil e legível? Bem, CSS Custom Properties, talvez mais conhecidas como Variáveis CSS , torna esses tipos de loops muito mais fáceis de ler e, consequentemente, mais fáceis de editar e refatorar no futuro.

Vamos pegar o exemplo acima e refatorá-lo para que ele use CSS Custom Properties.

Primeiro, definir os estilos principais para o componente .alert:

À medida em que são criados esses estilos-base, é possível configurar variáveis na classe .alert:

É possível fazer muito mais com variáveis CSS do que mudar uma interface para um tema escuro.

A partir daí, é possível estilizar cada classe personalizada .alert como .alert-warning sobrescrevendo essas propriedades em .alert:

E é isso! Obtém-se exatamente a mesma interface visual que a feita com um loop Sass:

É muito mais fácil olhar para esse código e entendê-lo logo de cara. Com o loop Sass, quase parece que estamos tentando fazer muitas várias coisas complicadas em um lugar — aninhar classes dentro de outras classes e criar os próprios nomes de classes.

Sem mencionar que, então, é preciso ir e voltar entre o Sass map original e os estilos gerados. Com Variáveis CSS, todos os estilos estão contidos no original .alert.

Variáveis CSS x Sass loops

Embora esteja claro que variáveis CSS e Sass loops sirvam a propósitos diferentes, as Propriedades Personalizadas de CSS podem tornar o código mais legível e sustentável para o futuro.

Ah, e caso esteja se perguntando, o suporte dos navegadores à variáveis CSS já está bem decente. E a tendência é melhorar muito em breve.

O poder de Sass vai bem além do que foi mostrado neste artigo, mas, com o passar do tempo, a tendência é que CSS também consiga fazer tudo isso.

Aguardemos para ver o que o futuro com CSS nos reserva.

E-book com 10 dicas para montar seu portfolio altamente eficiente e conseguir muito mais clientes e projetos!

Download GRÁTIS