Abraçando o Sass: Por que você deve parar de usar Vanilla CSS

Quando ouvi pela primeira vez sobre Sass e outros pré-processadores CSS, meus pensamentos exatos não eram muito entusiasmados. “Por que precisamos de outra ferramenta para algo que já funciona tão bem quanto CSS?”. “Eu não vou usar isso”. “Meu CSS está ordenado o suficiente para não precisar dele”. “Um pré-processador é para quem não sabe escrever CSS, se você souber escrever CSS não precisará de um pré-processador”. “Afinal, processadores são para quem não sabe escrever CSS. Se o fizessem, não precisariam de um pré-processador”. E na verdade eu os evitei por um tempo, até que fui forçado a usá-lo em vários projetos.

Eu não percebi o quanto estava gostando de trabalhar com Sass até recentemente, quando tive que voltar para o CSS vanilla em um projeto. Durante esse tempo, aprendi tanto que decidi elogiar Sass e fazer deste um mundo melhor, e fazer de você uma pessoa mais feliz!

Por que usar Sass de qualquer maneira?

Organização: @import

Este projeto que acabei de mencionar, um grande site de comércio eletrônico, tinha um único arquivo CSS com 7184 linhas de declarações de estilo não compactadas. Sim, você leu certo: sete mil cento e oitenta e quatro linhas de CSS. Tenho certeza de que este não é o maior arquivo CSS que os desenvolvedores front-end tiveram que lidar na indústria, mas era grande o suficiente para ser uma bagunça completa.

Esta é a primeira razão pela qual você precisa do Sass: ele ajuda você a organizar e modularizar suas folhas de estilo. Não são variáveis, não é aninhamento. Para mim, o principal recurso do Sass são parciais e como ele estende a regra CSS @import para permitir a importação de arquivos SCSS e Sass. Na prática, isso significa que você poderá dividir seu enorme arquivo style.css em vários arquivos menores que serão mais fáceis de manter, entender e organizar.

A regra @import existe há quase tanto tempo quanto o próprio CSS. No entanto, ganhou má fama, pois quando você usa @import em seus arquivos CSS, você aciona solicitações HTTP separadas, uma para cada arquivo CSS que você está importando. Isso pode prejudicar o desempenho do seu site. Então o que acontece o que você usa com Sass? Se você nunca parou para pensar no que significa a palavra “pré-processador”, agora é a hora.

Um pré-processador é um programa que processa seus dados de entrada para produzir uma saída que é usada como entrada para outro programa. —Wikipédia

Então, voltando à nossa regra @import, isso significa que o @import será tratado pelo Sass e todos os nossos arquivos CSS e SCSS serão compilados em um único arquivo que terminará em nosso site ao vivo. O usuário terá que fazer apenas uma solicitação e baixará um único arquivo, enquanto a estrutura do seu projeto pode ser composta por centenas de arquivos modularizados. É assim que o style.scss de um projeto Sass típico pode se parecer:

 @import “variables”; @import “reset”; @import “fonts”; @import “base”; @import “buttons”; @import “layout”;

Não se repita: variáveis

Qualquer artigo elogiando o Sass provavelmente começará mencionando sua característica estrela - variáveis. O uso mais comum de variáveis ​​é uma paleta de cores. Quantas vezes você encontrou várias declarações do que deveria ser a mesma cor, terminando no CSS como tons ligeiramente diferentes porque ninguém usa o mesmo código hexadecimal? Sass para o resgate. No Sass, você pode declarar variáveis ​​com praticamente qualquer valor. Então, nossa paleta de cores pode ser algo como:

 $brand: #226666; $secondary: #403075; $emphasis: #AA8439;

As palavras que começam com “$” são variáveis ​​Sass. O que significa é que mais tarde em suas folhas de estilo, você poderá usar essas palavras e elas serão mapeadas para os valores que você definiu antes:

 body { background: $secondary; } .logo { color: $brand; } a { color: $emphasis; } a:hover { color: $brand; }

Imagine como isso poderia mudar nossas 7184 linhas de código CSS, e você pode começar a desejar Sass agora mesmo. Melhor ainda, imagine que há um redesenho da marca e você precisa atualizar todas as cores do seu CSS. Com o Sass, a única coisa que você precisa fazer é atualizar as declarações dessas variáveis ​​uma vez, e baam! As alterações serão em torno de suas folhas de estilo.

Codifiquei este exemplo no Sassmeister, um playground Sass. Então vá em frente e tente mudar essas variáveis ​​para outra coisa.

A utilidade das variáveis ​​não se limita apenas às cores, mas também às declarações de fontes, tamanhos, consultas de mídia e muito mais. Este é um exemplo bem básico para você ter uma ideia, mas acredite, as possibilidades com o Sass são infinitas.

Código-fonte mais limpo: aninhamento

O aninhamento pode ser o segundo recurso mais mencionado do Sass. Quando voltei ao CSS vanilla depois de usar o Sass, o arquivo CSS que eu estava olhando parecia tão confuso que eu não tinha certeza se ele estava minificado. Sem aninhamento, o CSS vanilla não fica melhor do que arquivos .min.css bem impressos:

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; } .header.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .header .nav { list-style: none; } .header .nav li { display: inline-block; } .header .nav li a { display: block; padding: 0.5em; color: #AA8439; }

Com Nesting, você pode adicionar classes entre as chaves de uma declaração. Sass irá compilar e manipular os seletores de forma bastante intuitiva. Você pode até usar o caractere “&” para obter uma referência do seletor pai. Voltando ao nosso exemplo de CSS, podemos transformá-lo em:

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; &.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .nav { list-style: none; li { display: inline-block; a { display: block; padding: 0.5em; color: #AA8439; } } } }

Parece bonito e é mais fácil de ler. Sinta-se à vontade para brincar com este exemplo.

Novamente! Não se repita: Mixins e Extends

A repetição em CSS é sempre difícil de evitar. E não custa enfatizar isso um pouco mais, especialmente quando Sass te dá mixins e estende. Ambos são recursos poderosos e ajudam a evitar muita repetição. As possibilidades com mixins e extensões não parecem ter um fim. Com mixins, você pode fazer declarações CSS parametrizadas e reutilizá-las em suas folhas de estilo.

Por exemplo, digamos que você tenha um módulo de caixa com um botão dentro. Você quer que a borda da caixa e o fundo do botão sejam da mesma cor. Com CSS vanilla, você faz algo como:

 .box { border: 2px solid red; } .box .button { background: red; }

Digamos que agora você queira o mesmo módulo de caixa, mas com uma cor diferente. Você adicionará algo assim ao seu CSS:

 .box-alt { border: 2px solid blue; } .box-alt .button { background: blue; }

Agora, digamos que você queira um módulo de caixa, mas com borda mais fina. Você adicionaria:

 .box-slim { border: 1px solid red; } .box-slim .button { background: red; }

Muita repetição, né? Com Sass você pode abstrair esses casos para reduzir a repetição. Você poderia definir um mixin como este:

 @mixin box($borderSize, $color) { border: $borderSize solid $color; .button { background: $color; } }

E assim, seu código-fonte pode ser reduzido a:

 .box { @include box(2px, red); } .box-alt { @include box(2px, blue); } .box-slim { @include box(1px, red); }

Fica lindo né? Brinque com este exemplo. Você pode criar sua própria biblioteca de mixins ou, melhor ainda, usar uma das bibliotecas da comunidade disponíveis.

Extends são semelhantes, eles permitem que você compartilhe propriedades de um seletor para outro. No entanto, em vez de gerar várias declarações, eles geram uma lista de classes sem repetir suas propriedades. Dessa forma, você também pode evitar a repetição de código em sua saída. Vamos esquecer os botões do nosso exemplo anterior e ver como @extend funcionaria com .boxes .

Digamos que você declare uma primeira caixa:

 .box { margin: 1em; padding: 1em; border: 2px solid red; }

Agora você quer duas caixas semelhantes a esta, mas com cores de borda diferentes. Você pode fazer algo como:

 .box-blue { @extend .box; border-color: blue; } .box-red { @extend .box; border-color: red; }

É assim que o CSS compilado ficaria:

 .box, .box-blue, .box-red { margin: 1em; padding: 1em; border: 2px solid red; } .box-blue { border-color: blue; } .box-red { border-color: red; }

Poderoso, certo? Você pode encontrar o exemplo aqui. Se você revisar o CSS resultante, perceberá que a classe .box está sendo incluída na saída. Se você não quiser esse comportamento, você pode combinar @extend com “placeholders”. Um placeholder é um seletor especial que não produzirá uma classe no CSS. Por exemplo, às vezes me pego redefinindo muito os estilos padrão das listas. Eu geralmente uso @extend com um espaço reservado como este:

 %unstyled-list { list-style: none; margin: 0; padding: 0; }

Você pode então reutilizar este padrão em todas as suas folhas de estilo:

 .search-results { @extend %unstyled-list; } .posts { @extend %unstyled-list; } .nav { @extend %unstyled-list; }

Seu CSS compilado ficará assim:

 .search-results, .posts, .nav { list-style: none; margin: 0; padding: 0; }

Confira os exemplos aqui.

Há mais?

Absolutamente! Eu não queria complicar demais este artigo, mas há um mundo Sassy esperando para ser descoberto por você; e também há muitos recursos além desses: operações, comentários de linha única com //, funções, loops if … se você já pensou “seria ótimo fazer alguma coisa 'X' com CSS”, tenho certeza aquela coisa 'X' já foi feita pelo Sass. “CSS com superpoderes” é o seu slogan, e isso não pode estar mais perto da verdade.

Conclusão

Vá e visite a página de instalação e comece a hackear! Acredite, você não vai se arrepender.

Sim, existem algumas alternativas ao Sass. Outros pré-processadores (LESS, Stylus), pós-processadores, Grunt, etc. Existem até mesmo Variáveis ​​CSS. Não estou dizendo que Sass é a única tecnologia disponível. Tudo o que estou dizendo é que é o melhor! Pelo menos por enquanto. Não acredita no que estou dizendo? Vá em frente e tente você mesmo. Você não vai se arrepender!