porque usar pré-processador css?
Sempre me questiono quando surge novidades de ferramentas se estão aumentando o peso da minha mochila ou se realmente vão contribuir para o meu dia a dia de trabalho. Nesse texto, vou pesquisar sobre pré-processadores css e a contribuição para a realização das tarefas.
Sass é uma linguagem tipo uma espécie de “CSS com superpoderes”. A sigla Sass significa Sintactically Awesome Style Sheets, folhas de estilo sintaticamente maravilhosas. Consiste em uma linguagem para criação de folhas de estilo que posteriormente será transformada em CSS puro.
Para que você possa entender melhor, nós podemos fazer um paralelo entre Sass e Typescript, já que ambos oferecem funcionalidades novas com relação à tecnologia alvo (no caso do Sass, o CSS e do Typescript, o Javascript).
Este pré-processador de CSS também costuma facilitar o processo de criação de folhas de estilo, já que diferentemente do CSS, Sass implementa funcionalidades como regras aninhadas, funções e variáveis.
Atualmente, também é possível criarmos variáveis dentro do CSS, no entanto, esse recurso é relativamente recente e não é tão poderoso quanto é no pré-processador.
Instalando Sass
É possível instalá-lo com ferramentas de linha de comando interfaces gráficas ou inseri-lo diretamente no seu projeto.
Gosto de instalação do pré-processador globalmente utilizando o npm: npm install -g sass
O poder do Sass
conforme a sua aplicação cresce e mais regras são necessárias, o uso desta tecnologia pode fazer muita diferença.
Declaração de variáveis
Declarar variáveis em Sass é muito simples. Você só precisa definir algo como a sintaxe abaixo, de preferência no início do seu arquivo para manter a organização do mesmo.
$nomeDaVariavel: valorDepois, para utilizar essa variável, você pode só utilizar $nomeDaVariavel como valor para alguma propriedade CSS da sua formatação, o que é uma sintaxe muito mais prática do que a utilização de variáveis no CSS por exemplo.
Aninhamento
Também temos uma sintaxe para o aninhamento de seletores disponível no pré-processador. Então, ao invés do código abaixo:
Você pode utilizar algo como o código abaixo, o que deixa o seu código mais legível, mais organizado, e assim, mais fácil de manter:
Para utilizar o Sass, primeiramente, você deve criar um arquivo .sass ou .scss. Os dois formatos são aceitos, no entanto, possuem algumas mudanças de sintaxe como o uso ou não de chaves e ponto e vírgula.
Como exemplo, vou usar um arquivo HTML com o código abaixo e criar uma formatação para ele utilizando pré-processador.
Note que no meu arquivo HTML, eu estou inserindo uma folha de estilo .css e não .sass. Isso acontece porque, como eu disse anteriormente, o arquivo .sass precisa passar por uma transformação e se tornar um arquivo CSS para realmente ter algum efeito no seu projeto.
Sendo assim, criei um arquivo chamado estilo.sass e inseri a formatação abaixo:
No entanto, esses estilos ainda não serão aplicados ao seu HTML, porque o arquivo .css ainda não existe. Para criá-lo, vamos precisar rodar o comando sass --watch para que ele monitore o arquivo estilo.sass e gere o arquivo estilo.css quando o arquivo .sass for atualizado.
Esse comando watch pode ser utilizado de duas formas diferentes: a primeira é em um único arquivo onde ele tem a sintaxe sass --watch arquivoFonte.sass arquivoDestino.css e a segunda é fazendo o monitoramento de uma pasta e todos os seus arquivos, quando se utiliza sass --watch pastaFonte:pastaDestino.
Já que chamei ambos os arquivos de estilo, é preciso rodar o comando sass --watch estilo.sass estilo.css o que irá fazer a compilação do arquivo sass e gerar o css correspondente. Você pode ver uma comparação dos dois na imagem abaixo:
Depois que o arquivo CSS foi gerado, podemos abrir a página e temos a aparência o esperada:
O Sass pode ajudar no desenvolvimento do código. Tem muito mais funcionalidades que podem auxiliar na produtividade e na manutenção do código.
Como a sintaxe do pré-processador se baseia muito no CSS normal, podemos utilizar muitos dos conceitos aprendidos para lidar com o CSS no pré-processador.
A documentação desse pré processador Sass está no link a seguir. Existe outros pré-processadores css e funcionam de forma semelhante.
Vantagens ao utilizar um pré-processador
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, conseguindo estender a capacidade da linguagem de folha de estilos pura (CSS). De modo que seja possível criar uma série de coisas antes só possíveis com a utilização de uma linguagem de programação.
Também são vantajosos para a manutenção do código, além de facilitar um código limpo. 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.
Alguns dos pré-processadores CSS mais populares:
Para escrever esse texto, estudei os links a seguir:
Nesse artigo, vimos um pouco do poder dos pré-processadores css e a forma de utilizarmos nas nossas aplicações. Na minha visão, facilitam e muito para a reutilização de código, na organização dos estilos quando a aplicação vai crescendo. Espero que tenha gostado. Deixe o seu aplauso e até o próximo texto.
