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:

$alertStyles: (
  error: (
    theme: #fff5f5,
    icon: 'error.svg',
    darkTheme: #f78b8b
  ),
  success: (
    theme: #f0f9ef,
    icon: 'success.svg',
    darkTheme: #7ebb7a
  ),
  warning: (
    theme: #fff9f0,
    icon: 'warning.svg',
    darkTheme: #ffc848
  )
);

$alertStyles: (

error: (

theme: #fff5f5,

icon: 'error.svg',

darkTheme: #f78b8b

success: (

theme: #f0f9ef,

icon: 'success.svg',

darkTheme: #7ebb7a

warning: (

theme: #fff9f0,

icon: 'warning.svg',

darkTheme: #ffc848

)

);

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

@each $state, $property in $alertStyles {
  $theme: map-get($property, theme);
  $darkTheme: map-get($property, darkTheme);
  $icon: map-get($property, icon);
  
  .alert-#{$state} {
    background-color: $theme;
    border-color: $darkTheme;  
    &:before {
      background-color: $darkTheme;
      background-image: url($icon);
    }
    .alert-title {
      color: $darkTheme;
    }
  }
}

@each $state, $property in $alertStyles {

$theme: map-get($property, theme);

$darkTheme: map-get($property, darkTheme);

$icon: map-get($property, icon);

.alert-#{$state} {

background-color: $theme;

border-color: $darkTheme;

&:before {

background-color: $darkTheme;

background-image: url($icon);

}

.alert-title {

color: $darkTheme;

}

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:

.alert {
  --theme: #ccc;
  --darkTheme: #777;
  --icon: '';
  background: var(--theme);
  border: 1px solid var(--darkTheme);
  /* outros estilos vêm aqui */
  
  &:before {
    background-image: var(--icon);
  }
}

.alert {

--theme: #ccc;

--darkTheme: #777;

--icon: '';

background: var(--theme);

border: 1px solid var(--darkTheme);

/* outros estilos vêm aqui */

&:before {

background-image: var(--icon);

}

É 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:

.alert-success {
  --theme: #f0f9ef;
  --darkTheme: #7ebb7a;
  --icon: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/success.svg);
}

.alert-error {
  --theme: #fff5f5;
  --darkTheme: #f78b8b;
  --icon: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/error.svg);
}

.alert-warning {
  --theme: #fff9f0; 
  --darkTheme: #ffc848;
  --icon: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/warning.svg);
}

.alert-success {

--theme: #f0f9ef;

--darkTheme: #7ebb7a;

--icon: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/success.svg);

}

.alert-error {

--theme: #fff5f5;

--darkTheme: #f78b8b;

--icon: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/error.svg);

}

.alert-warning {

--theme: #fff9f0;

--darkTheme: #ffc848;

--icon: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/warning.svg);

}

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.