DEV Community

loading...
Cover image for Variáveis CSS x Variáveis Sass - Quando usar?

Variáveis CSS x Variáveis Sass - Quando usar?

lixeletto profile image Camilo Micheletto ・3 min read

Elas parecem a mesma coisa mas possuem diferenças fundamentais, pontos fortes e fracos (e podem coexistir).

Pra alguns as variáveis CSS são um mistério ainda, pra outros apenas pra pré-definir alguns valores no :root do código, pra aqueles que já consumiam antes as variáveis Sass pode parecer redundante usá-las no CSS, então qual a diferença?

Diferenças

Ambas guardam valores, podem ser usadas em funções e redefinidas de acordo com o escopo - a diferença está no processamento.

CSS

Variáveis CSS funcionam na vasta maioria dos browsers e funcionam como propriedades customizadas, da mesma forma que você não pode usar propriedades fora de uma regra de CSS, você não pode declarar variáveis fora delas também.

--primary: #12f;
/* Vai dar ruim */

.elemento {
  color: var(--primary);
}
Enter fullscreen mode Exit fullscreen mode

As variáveis CSS também ficam restrita ao escopo da onde elas foram declaradas, sendo herdadas apenas pelos filhos, tal como as outras propriedades. Vamos imaginar que você definiu uma variável com uma cor dentro de um <ul>, ela será herdada pelos filhos <li>.


ul {
  --primary: #12f;
  color: var(--primary);
}

li {
  color: inherit; /* #12f */
}

Enter fullscreen mode Exit fullscreen mode

Outros fatos:

  • As variáveis ainda continuam com a característica de variável mesmo no navegador.

  • As variáveis CSS são imperativas, ao mudá-la, mudará seu valor em todas as instâncias.

  • Você pode trocar o valor delas inspecionando o elemento pra testar coisas.

  • Você pode manipular com javascript.

👉 No navegador

Imagem de duas variáveis declaradas vistas pelo painel de inspeção do chrome

E qual é a do :root?

O :rootse refere ao documento, é quase como um <html>, só que a especificidade dele é mais alta, estilos declarados no :root ficam disponíveis globalmente, visto que todos os outros seletores vão descender dele.

No javascript

Como as variáveis CSS são interpretadas pelo navegador, você consegue ver os valores e inserir novos via Javascript:

const animatedButton = document.getElementById("animButtom");

// Pegar valor de uma variável 
getComputedStyle(animatedButton)
    .getPropertyValue('--color-primary');

// Inserir novo valor em uma variável ou criar uma variável nova
animatedButton.style.setProperty('--color-primary', 'pink');
Enter fullscreen mode Exit fullscreen mode

Usando o Javascript pra pegar a posição X e Y do mouse e colocar no CSS como variávies conseguimos criar efeitos maneiros assim:

Sass

A diferença das variáveis Sass pras CSS é que elas são avaliadas e retornam um CSS estático, ou seja, todas as funções, mixins e interpolações que ocorrem no Sass retornam CSS normal e vão pro navegador como CSS normal. Ou seja, o Sass não reconhece variáveis CSS, mas variáveis CSS reconhecem variáveis Sass.

Dito isso, a gente não consegue usar Sass no navegador, mas conseguimos usar suas variáveis dentro de media-queries

$breakpoint: 432px;
@media screen and (max-width: $breakpoint) {
  /* Conteúdo */
}
Enter fullscreen mode Exit fullscreen mode

Conseguimos guardar variáveis Sass dentro de mapas e listas, que são ótimos pra criar funções generativas - que fabricam novos estilos.

$color-map: (
  "white": $white,
  "dark" : $black,
  "primary" : $blue
);

.button {
  @each $name, $color in $color-map {
    &__#{$name} {
      background: $color;
      color: complement($color);
    }
}
Enter fullscreen mode Exit fullscreen mode

E conseguimos criar funções e mixins que são reaproveitáveis e podem receber variáveis que alteram seu output

$main-style: #33ffcc;

@mixin navbar-colors($color) {
  background: $color;
  color: complement($color);
}

.navbar {
  @include navbar-colors($main-style);
}
Enter fullscreen mode Exit fullscreen mode

E quando eu uso qual?

Existe o conceito de variáveis quentes e frias. As variáveis quentes são as que podem sofrer alteração de valor ou de escopo já no navegador, variáveis frias são todo o resto.

  • Grids, breakpoints e espaçamentos
    Informações relacionadas a tela costumam ser variáveis frias porque elas estão relacionadas com o tamanho da tela que ja é uma unidade variável. Outro ponto é que além dos breakpoints de Sass poderem ser usados como argumentos em media-queries, você consegue redesignar valores a essas variáveis em diferentes escopos.

  • Cores
    Eu particularmente prefiro usar variáveis Sass para cores pois o Sass possui uma série de funções de cores e a possibilidade de criar mapas e listas de cores para funções generativas. Outras pessoas preferem cores como variáveis CSS pois é possível alterar o tema de cores sobrescrevendo essas variáveis.

  • Bordas e sombras
    São valores que raramente mudam, então variáveis Sass.

  • Propriedades que serão modificadas via Javascript
    Variáveis quentes - CSS. Você também pode passar variáveis Sass como valor para variáveis CSS, mas seria a mesma coisa do que passar um valor estático.

Discussion (0)

pic
Editor guide