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

> Variáveis CSS são melhores que loops de Sass? Compare custom properties com preprocessadores para geração dinâmica de estilos. Veja exemplos!

URL: https://dpw.dev/css/variaveis-css-loops-sass/  
Publicado em: 2019-03-18  
Categoria: css  
Tags: interface, layout, sass  
Autor: Tárcio Zemel

**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.

> Artigo baseado em [Do CSS Custom Properties Beat Sass Loops?](https://css-tricks.com/do-css-custom-properties-beat-sass-loops/).

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:

![](/images/blog/variaveis-css-loops-sass/Screenshot-2019-02-24-20.23.38.webp)

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](https://sass-lang.com/documentation/file.SASS_REFERENCE.html#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:

```scss
$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:

```scss
@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:

[Exemplo no CodePen](https://codepen.io/anon/pen/eb6c09a03db3a456b84669dbd83b891e)

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](https://www.w3.org/TR/css-variables-1/), 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`:

[Exemplo no CodePen](https://codepen.io/anon/pen/6f2c4da8687dbad35643d99fd6a18395)

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

```scss
.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`:

```scss
.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:

[Exemplo no CodePen](https://codepen.io/anon/pen/2a35e9ddf07624e99d791a730959624f)

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml