CSS Variáveis

[linconkusunoki]

Galera, como vocês estão absorvendo esta chegada das Variáveis nativas do CSS?
O Sass possui variáveis e outras coisas como mixins e placeholders, então não sei se ele deixaria de ser utilizado.
Também vi algumas pessoas considerando utilizar PostCSS, que está ficando mais comum por causa dos frameworks.

Eu vejo que não é o momento ainda de largar os pré-processadores, mas talvez projetos bem pequenos não haveria necessidade de utilizar... enfim o que vocês acham?

[mahenrique94]

Fala ai @linconkusunoki utilizo o SASS por ainda é muito melhor que CSS, podemos tenho códigos em SASS de 10 linhas que escrevem mais de mil linhas em CSS, placeholder, mixin, nested, e functions helper, portanto, tomara que o CSS um dia tenha todos os poderes do SASS, mas ainda recomendo sua utilização.

Não só eu, mas vejo muita gente e empresas o utilizando, para mim é o melhor pré processador.

Sobre o PostCSS, não gostei, ele sozinho não faz muita coisa, precisa de plugins para turbiná-lo.

Lembrando que são opiniões minhas.

[kivervinicius]

Acredito ser algo muito novo ainda, mas vale a pena se manter atualizado sobre tudo de novo, pré-processadores ainda irão pagar muitos almoços por ai...

[kvnol]

Estou implementando algumas CSS variáveis, mas ainda utilizando o SASS como pré-processador. As variáveis do CSS funcionam diferentes das do SASS por conta de poderem rodar no browser e dinâmicas, através do JavaScript. Como, por exemplo:

https://codepen.io/electerious/pen/MQrRxX

[lucianobarauna]

Ainda continuo utilizando pré-processador e torço para o CSS ficar tão bom quanto eles.

[linconkusunoki]

@kvnol eu já até tinha salvo este pen kkkk muito massa, até pq vc conseguiu usar o que é bom dos dois mundos.
Eu vi este exemplo também de ordenação de tabela. Mind blown

[kvnol]

Sim, esse da tabela é maravilhoso.

[gss-patricia]

Sabemos que vamos usar pre-processador por um bom tempo, contudo, vale a pena experimentar o novo. As vezes precisamos fazer alguns testes, ou POCs... nas POCs eu não gasto energia configurando pre-processador... para casos simples como este o CSS variables é bem vindo.
Já trabalhei em projetos que não usavam pre-processadores, então nesse caso seria um prato cheio utilizar o css variables, ou seja, melhor do que nada.

[Sergioamjr]

Pré-processador é padrão nos meus projetos. Comecei a usar variáveis CSS em alguns projetos, gostei bastante mas tem uma limitação, ainda não é suportada no IE e Opera Mini https://caniuse.com/#search=css%20variables, por isso voltei a usar variáveis no pré-processador.

[kivervinicius]

@SergiojrDEv fora o IE, alguém usa OperaMINI? hehe

[tarciozemel]

Calma, gente... Há diferenças entre usar variáveis de pré-processadores e nativas: https://css-tricks.com/difference-between-types-of-css-variables/

[gss-patricia]

Não são a mesma coisa isso é fato!.

Adorei o twuit da Ana Tudor sobre isso:

"Eu continuo vendo o povo dizer "qual é o objetivo do CSS vars quando temos pré-processadores"
"Por que ainda usar pré-processadores quando agora temos CSS vars".

** CSS vars != Preprocessor vars **

Eles não são os mesmos! Há coisas que o CSS vars pode fazer que os pré-processadores não podem fazer e o contrário!
"

Fonte: https://twitter.com/anatudor/status/966594664265670658

[kvnol]

@gss-patricia Eles não são os mesmos! Há coisas que o CSS vars pode fazer que os pré-processadores não podem fazer e o contrário!

Exato, pessoal. As variáveis do SASS ou outros pré-processadores podem ser dinâmicas dentro do pré-processador, depois de compiladas elas são apenas valores estáticos no .css, já as variáveis nativas rodam no browser como variáveis, podendo ser dinâmicas em produção.

[linconkusunoki]

Ahh faz mais sentido, então não existe uma regra de quando usar uma ou outra já que as duas se completam?

[kvnol]

Sim, @linconkusunoki. Eu, por exemplo, tô usando as variáveis nativas com o SASS, pois utilizo o SASS para separar os arquivos, usar mixins e outras coisas. Se complementam.