Pré-processador CSS? Sass? O que é e por onde começar!

O que são pré-processadores? Essa é uma pergunta muito comum entre os desenvolvedores, principalmente iniciantes da área. Se esse é o seu caso, fique tranquilo, ao final desse artigo você saberá o que são os pré-processadores, para que servem e como dar o pontapé inicial com a tecnologia.

Resumindo, pré-processadores, como o próprio nome se faz entender, é um programa que tem uma entrada, um processamento e uma saída.

“Ah tá, beleza Tássio, entendi tudo agora!”

Os pré-processadores são programas que recebem como entrada textos e efetuam conversões léxicas nele, ou seja, entra com uma sintaxe, essa sintaxe é pré-processada para gerar outra sintaxe. As conversões podem incluir substituição de palavras, inclusão condicional e inclusão de outros arquivos.

Existem atualmente diversos pré-processadores, para diversas linguagens, entre elas:

  • HTML: HAML, Markdown, Slim;
  • CSS: Sass, LESS, Stylus;
  • JS: CoffeeScript;

Pré-processadores CSS

Nesse artigo, iremos focar nos pré-processadores CSS. Entre eles, destaque para o Sass e o LESS, pois são os mais utilizados atualmente. A grande maioria dos desenvolvedores não utilizam pré-processadores, muitos  por não saber ou até mesmo por não conhecerem a tecnologia.

(Portanto, saber utilizar tais tecnologias pode ser um diferencial na carreira de um desenvolvedor)

Em 2016, Ashley Nolan (engenheiro UI que trabalha na JUST EAT) realizou uma pesquisa que obteve 4.715 respostas. Ressalto que esses números representam apenas uma amostra de desenvolvedores front-end que trabalham na indústria – portanto, eles não devem ser tomados como evangelho, mas apontam para uma tendência áspera de mercado.

Nessa pesquisa, foram feitas 19 perguntas, uma delas foi:  Qual o pré-processador CSS que você utiliza?

O resultado foi que, dos 4.715 desenvolvedores, exatos 2.989 responderam que utilizam o Sass como pré-processador, isso corresponde a 63,39%, como podemos observar no gráfico abaixo:

Confira a pesquisa completa aqui.

Percebam no gráfico acima que 13.6% dos desenvolvedores afirmaram não utilizar nenhum pré-processador e em segundo lugar dos pré-processadores temos o LESS. Vejam abaixo uma busca realizada no Google Trends, podemos ver que o Sass ganha, cada vez mais popularidade, se mantendo como o pré-processador mais popular. Vejam o gráfico logo abaixo:

Imagem gerada dia 23/06/2017

Vantagens ao utilizar um pré-processador

Mas afinal, quais os benefícios em utilizar um pré-processador CSS? Muitos!

Desde a criação de variáveis, condicionais, repetição, imports, funções, mixins e até extends que possibilitam você extender propriedades, evitando a duplicação de código. Resumindo, com pré-processadores CSS, conseguimos estender a capacidade da linguagem de folha de estilos pura (CSS). De modo que seja possível criar uma série de coisas (citadas acima), antes só possíveis com a utilização de uma linguagem de programação.

Além de todos os benefícios comentados acima, os pré-processadores também são vantajosos para a manutenção do código, além de facilitar um código limpo. Com pré-processadores, podemos ainda utilizar arquivos para otimizar a organização dos códigos e realizar a importação, quando necessário. Dessa forma, tornando os códigos CSS mais flexíveis e reutilizáveis.

Sass/SCSS: Dê o pontapé inicial

Afinal o que é o Sass?  Sass é uma extensão de CSS que adiciona poder e elegância ao CSS básico, essa que é uma Gem do Ruby, ou seja, uma biblioteca escrita em linguagem Ruby. Esse pré-processador, como dito anteriormente, permite que você use variáveis, regras aninhadas, mixins, importações e mais! Tudo com uma sintaxe totalmente compatível com CSS.

Para desenvolver os primeiros scripts utilizando o Sass você necessita instalar o Ruby (para usuários Mac não é necessário, pois já vem instalado nativamente). Os detalhes para a instalação podem ser acessados no site da linguagem Ruby.

Se Ruby não é muito a sua praia e você tem interesse em conhecer mais sobre a linguagem e o framework, não deixe de conferir o nosso treinamento completo sobre Ruby on Rails!

Após a instalação do Ruby, faz-se necessário a instalação do Sass. Para isso, basta executar o seguinte comando:

Veja mais detalhes da instalação nesse link: sass-lang.com/install.
O Sass permite que sejam utilizadas duas sintaxes e consequentemente duas extensões para o arquivo: .sass e .scss. Segue abaixo um exemplo de cada uma:

Exemplo de Código em Sass (arquivo_origem.scss)

Exemplo de Código em Sass (arquivo_origem.sass)

Observe que a sintaxe .sass (mais antiga) utiliza apenas a indentação e que a sintaxe .scss (mais atual) utiliza a mesma estrutura do CSS tradicional.

Após a instalação e sabendo como podemos criar os nossos códigos em Sass, devemos agora abrir o terminal/shell, acessar a pasta onde o arquivo se encontra e executar o comando a seguir:

O arquivo_destino.css será gerado automaticamente, ele será a saída após o pré-processamento.

Com o Sass, podemos utilizar variáveis:

A saída do código acima, após o processamento será a seguinte:

Podemos também utilizar aninhamento:

A saída do código acima, após o processamento será a seguinte:

Quando utilizar?

Entendemos agora o que são e para que servem os pré-processadores. Mas e agora? quando utilizar? Então, depende muito do tamanho do projeto!

Se você irá desenvolver apenas uma página simples e pequena, talvez não seja o caso. Porém, quando se trata de sistemas ou até mesmo portais grandes ou, se você quer facilitar a manutenção desse código no futuro, vale muito a pena utilizar um pré-processador como o Sass.

Como começar?

O uso de pré-processadores como o Sass com certeza já é uma realidade no mercado de desenvolvimento, podendo ser facilmente encontrado em projetos open source, seja de front-end ou de back-end. Muitas vezes, é comumente exigido como requisito para oportunidades de emprego. Quando não é, com certeza é tratado como um diferencial entre os candidatos.

Pensando nisso, estamos criando um curso completo sobre o assunto aqui na Becode. Em breve, você terá a oportunidade de conhecer a tecnologia na integra, dando os seus primeiros passos e, com certeza, se destacando no mercado de trabalho. Fique esperto! Logo iremos lançar o curso de Sass aqui na Becode.

Quanto ao artigo, espero que tenha ajudado você a tirar todas as suas dúvidas sobre o assunto. Fique a vontade para deixar o seu comentário, com críticas, elogios, sugestões ou o que for. Um abraço e até a próxima!

 

Curso Online de Sass/SCSS - Treinamento Completo | Becode

Written by Tássio Gonçalves

Profissional com ampla experiência na área de TI, com domínio em diversas tecnologias, dos mais variados segmentos: redes de computadores, design, desenvolvimento web, banco de dados, sistemas e mais! Atua na área de TI há mais de 10 anos. Atualmente, é concursado do IFBA, professor no CETEP - Itaparica/BA, desenvolvedor web e Google Developers Group Organizer.

Como escolher a primeira linguagem de programação? | Becode

Como escolher a primeira linguagem de programação?

Internet das Coisas - O que é? Aonde vive? Como se alimenta...!? | Becode

Internet das Coisas (IoT): O que é? Aonde vive? Como se alimenta…!?