Pré-processador CSS: Sass o que é e por onde começar?

Pré-processador CSS: Sass o que é e por onde começar?

“Pré-processador CSS: Sass o que é e por onde começar?”

Essa é uma pergunta muito comum entre os desenvolvedores, principalmente iniciantes, 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.

PRÉ-PROCESSADORES

Pré-processadores, como o próprio nome se faz entender, é um programa que tem uma entrada, um processamento e uma saída. Ah tá blz Tássio entendi tudo! ;-D rsrsrs.

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, como por exemplo:

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

PRÉ-PROCESSADORES CSS

Os pré-processadores CSS mais utilizados são o Sass e o LESS, ainda existe uma grande maioria de desenvolvedores que não utilizam pré-processadores, a grande maioria por não saber ou até mesmo por não conhecerem.

Em uma pesquisa realizada no ano de 2016 por Ashley Nolan, um engenheiro sênior de UI que trabalha na JUST EAT, essa que obteve 4.715 respostas, ressaltando que esses números representam 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, principalmente 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:

VANTAGENS AO UTILIZAR UM PRÉ-PROCESSADOR

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

Os benefícios são 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.

Os pré-processadores facilitam a manutenção do código, além de facultar um código limpo, utilizando vários arquivos para organizar os códigos e realizando a importação quando for necessário 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 de MAC não é necessário pois já vem instalado nativamente. Os detalhes para a instalação podem ser acessados no site da linguagem: www.ruby-lang.org.

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

gem install sass

Veja mais detalhes da instalação nesse link: sass-lang.com/install.

O Sass permite que seja utilizada duas sintaxes e consequentemente duas extensões para o arquivo, .sass e .scss, segue abaixo um exemplo de cada uma dessas:

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

$cor: red;
.item{
  background: $cor;
}

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

$cor: red;
.item
  background: $cor;

Observe que a sintaxe .sass, sintaxe mais antiga, utiliza apenas a indentação e que a sintaxe .scss, sintaxe mais atual e mais utilizada, 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: 

sass --watch arquivo_origem.scss:arquivo_destino.css

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

.item {
  background: red;
}

 

Com o Sass podemos utilizar Variáveis como vemos a seguir:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

 

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

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

 

Podemos também utilizar Aninhamento:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 4px 10px;
    text-decoration: none;
  }
}

 

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

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 4px 10px;
  text-decoration: none;
}

 

CONCLUSÃO

Entendemos agora o que são e para que servem os pré-processadores. Mas quando utilizar?

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

O uso de pré-processadores como o Sass, é uma realidade no mercado, podendo ser facilmente encontrado em projetos open source, seja de front-end ou de back-end,  e é comumente exigido como requisito para oportunidades de emprego.

QUALIFIQUE-SE PARA O MERCADO DE TRABALHO, OPORTUNIDADE ÚNICA CURSO ONLINE

 CSS Desenvolvimento Front-end SASS