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);
}
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 */
}
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
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');
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 */
}
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);
}
}
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);
}
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.
Top comments (0)