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

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
  )
);

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;
    }
  }
}

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);
  }
}

É 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);
}

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