Pré-processadores - Você precisa conhecer e aprender

Destaque

Todos nós vivemos num mundo onde as coisas evoluem de forma tão rápida que quando "piscamos os olhos", aquela tecnologia que ouvimos falar em um dia já está em pleno vapor no outro.

Confesso que me frustro quando não consigo acompanhar essas evoluções, acho que todos nós somos assim.

E quando descubro que conseguiram fazer uma coisa fácil ficar ainda mais fácil e rápido, fico extremamente curioso para saber o que é e como fizeram.

Pois é, estou falando dos Pré-processadores. Essa maravilha inventada para agilizar ainda mais nossa vida de front-end.

O que é?

Os Pré-processadores surgiram da necessidade de organizar, facilitar, estender e deixar mais legível a escrita do CSS.

Com a chegada do CSS 3, que considero uma “mãe” surgiram várias possibilidades que eram impossíveis de se fazer anteriormente, mas com tantos poderes vem extensas linhas de código, prefixos e repetições.

Isso tudo porque quando uma linguagem é muito simples de ser escrita, acaba ficando repetitiva e se torna muito cansativo. Se você trabalha ou já trabalhou com CSS, já vivenciou essa seguinte situação:

.btn{
 background: #1e5799; 
 background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); 
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
 background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); 
 background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); 
 background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); 
 background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
}
.btn:hover{
background: #4670B2; 
 background: -moz-linear-gradient(top,  #4670B20%, #6689CB 50%, #207cca 51%, #7db9e8 100%); 
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4670B2), color-stop(50%,#6689CB), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
 background: -webkit-linear-gradient(top,  #4670B2 0%,#6689CB 50%,#207cca 51%,#7db9e8 100%); 
 background: -o-linear-gradient(top,  #4670B2 0%,#6689CB 50%,#207cca 51%,#7db9e8 100%); 
 background: -ms-linear-gradient(top,  #4670B2 0%,#6689CB 50%,#207cca 51%,#7db9e8 100%); 
 background: linear-gradient(to bottom,  #4670B2 0%,#6689CB 50%,#207cca 51%,#7db9e8 100%);

A escrita é muito simples, mas se torna muito cansativo escrevê-la. E isso é só uma parte do código, imagine você codificando uma interface Inteira.

Bem, tenho a felicidade de informar que seus problemas acabaram. Com a vinda dos Pré-processadores, os desenvolvedores agora terão mais tempo para se preocupar com outras “picuinhas” que não seja ficar organizando o código CSS.

Mas como isso funciona?

Então os Pré-processadores são compiladores que recebem cadeia de caracteres ou códigos e efetua conversões léxicas. Essas conversões se transformam no nosso caso em específico, na linguagem de estilo nativa CSS.

Para entender um pouco melhor de uma olhada na sintaxe escrita para pré-processar:

Pré-processador

// LESS
@color: #4D926F;
#header {
  color: @color;
  .border-radius();
}
.border-radius(@r: 5px) {
  -webkit-border-radius: @r;
  -moz-border-radius: @r;
  -ms-border-radius: @r;
  -o-border-radius: @r;
  border-radius: @r;
}

CSS compilado

/* CSS Compilado */
#header {
 color: #4D926F;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 -ms-border-radius: 5px;
 -o-border-radius: 5px;
 border-radius: 5px;
}

Os Pré-processadores de CSS podem ser compilados tanto do lado cliente como do lado servidor. Geralmente esses Pré-processadores executam via JS, Node.js ou PHP.

O que eu ganho com isso?

São várias as vantagens de um Pré-processador, e para não ficar aqui escrevendo linhas e linhas explicando as vantagens confira a lista:

  • Dinamismo nas folhas de estilos;
  • Reaproveitamento de código;
  • Escrita ainda mais simples;
  • Trabalhe com recursos fundamentais da programação, como funções, variáveis e classes;
  • Fácil manutenção, devido a utilização de variáveis;
  • Aninhamento e Herança;

Tá, mas por onde começo?

Para início de conversa, para trabalhar com Pré-processador, você primeiro tem que conhecer pelo menos o básico de CSS. Se você ainda não sabe nada de CSS, recomendo que estude primeiro e depois entre para o mundo sem volta dos Pré-Processadores.

Hoje no mercado existem várias ferramentas pra se trabalhar, mas as que se destacam mais são o Less, Sass e Stylus. Todas são ótimas ferramentas e cabe a você testar e ver qual se adaptará ao seu estilo de desenvolvimento.

logo less

Particularmente acho a melhor para desenvolver, por isso uso ela e recomendo. Sua sintaxe, apesar de ter muitas semelhanças com as outras, acaba sendo um pouco mais simples e a documentação tem uma versão em português que é excelente.

Quero experimentar e aprender Less [Doc Inglês] >>

Quero experimentar e aprender Less [Doc Português] >>

sass logo new

De todas é a que tem mais funcionalidades e é a mais antiga. Recentemente sua sintaxe sofreu algumas mudanças. Acrescentou a possibilidade de colocar “{}” e “;” se fundido ao SCSS deixando a sintaxe mais natural e próxima do CSS.

Quero experimentar e aprender Sass >>

stylus

Não se diferencia muito das outras, mas em particular não é obrigatório o uso de “{}”, “;” e “:” se tornando um pouco mais expressiva.

Quero experimentar e aprender Stylus >>

Conclusão

Apesar de muitos desenvolvedores defenderem ferreamente o CSS puro e não utilizar os Pré-processadores, na minha opinião estão dando um passo para trás, pois a tecnologia veio para agregar e não para atrapalhar.

Em alguns casos o uso do Pré-processador atinge de forma negativa no desempenho do projeto, mas isso se deve a má escrita dos códigos gerando CSSs monstruosos.

Agora se o seu projeto é minúsculo e terá pouca estilização, recomendo que utilize o CSS puro mesmo. Com certeza o desempenho será maior.

Acredito que o futuro do CSS, no caso o 4 ou o 5 a equipe da W3C devem estende-lo ao nível dos Pré-processadores de hoje.


Se gostou do post, viu algum erro ou se tem alguma crítica não hesite em deixar um comentário e compartilhar. Isso ajuda muito o blog ficar de pé.

Última modificação em Domingo, 24 Maio 2015 18:06
(0 votos)
Lido 4316 vezes

Deixe um comentário

Certifique-se de preencher os campos indicados com (*). Não é permitido código HTML.

Receba conteúdos exclusivos

Please wait