Os Pré-Processadores CSS

Os pré-processadores é um tema que pode causar muita confusão. Principalmente para quem está começando e quer entender esse conceito. Porém, muitas empresas trabalham com algum pré-processador em seus projetos devido a alta capacidade de escalabilidade e organização. Hoje, entederemos de vez o que são os pré-processadores CSS.

O que são os pré-processadores CSS?

Os pré-processadores CSS são uma forma de estilizar elementos HTML, com uma sintaxe e possibilidades diferentes do que usar o CSS puro. Eles permitem, por exemplo, a criação de mixins, funções e sintaxe de aninhamento de estilizações.

Os mixins são uma forma de criar um conjunto de estilizações padrões para reutiliza-las no decorrer da estilização, podendo ser facilmente adaptada para qualquer mudança caso necessário. Além do mais, os mixins nos permitem criar parâmetros customizáveis, criando assim, uma flexbilidade gigantesca na hora de estilizar elementos.

As funções, diferente dos mixins, nos permite retornar algum valor como estilização. Elas são geralmente usadas para realizar transformações em valores ou para fornecer um valor dinâmico para uma propriedade CSS.

Esses são apenas dois pontos positivos dos pré-processadores, esses dois tópicos entre outras funcionalidades disponíveis na hora de utilizar-los abordaremos ao longo do artigo.

Curso CSS - Sass

Conhecer o curso

Principais pré-processadores

Sabemos o que é, e algumas vantagens em relação ao CSS puro, porém, quantos pré-processadores existem? É dificil dizer um número exato devido ao grande avanço da tecnologia dos dias atuais. Entretanto, existe uma lista de pré-processadores mais utilizados no mercado, que de fato é o mais importante. Os mais utilizados são: Sass, Less e Stylus, sendo o primeiro o mais utilizado e provavelmente o mais conhecido pelos desenvolvedores. Vamos conhece-los.

Sass

Disparado, o pré-processador mais utilizados por desenvolvedores que fazem uso desse tipo ferramenta. Sass é um abrevisão de “Syntactically Awesome Stylesheets”, que traduzindo é “Folhas de Estilo Sintaticamente Incríveis”. Ele foi criado em 2006 por Hampton Catlin. Ele foi criado para suprir alguns pontos que o CSS puro ainda não possuia. Mas, ainda hoje é uma ferramenta poderosíssima.

Características

No Sass temos uma forma de escrever um tanto diferente da convencional. É que com Sass não usamos as {} chaves para adicionar as propriedades, precisamos apenas aninhar corretamente os estilos um nível para dentro do seletor. Tornando assim um estilo mais rápido de ser escrito e com a possibilidade de escalar facilmente o código. O aninhamento também nos permite criar estilos para os elementos filhos. Os imports são fundamentais no Sass, possibilitando fracionar partes dos seus estilos em arquivos diferentes. Aumentando ainda mais a organização.

Também podemos usar os mixins e funções com Sass, assim como, todos os outros pré-processadores. Aqui está um exemplo de CSS puro para Sass

.container {
	background-color: brown;
	width: 100%;
}

.item {
	width: 100px;
	height: 100px;
	transition: .5s;
}

.item:hover {
	transform: scale(1.05);
}

.container
	background-color: brown
	width: 100%

	.item
		width: 100px
		height: 100px
		transition: .5s

		&:hover
			transform: scale(1.05)

Nesse exemplo, podemos ver claramente o aninhamento sendo aplicado. Lembrando que, a classe .item precisa ser um elemento filho da classe .container para funcionar corretamente.

Scss

O Scss é um tipo de arquivo que aceita a sintaxe tanto do Sass, como vimos no exemplo, como também aceita a sintaxe do CSS puro. Permitindo assim, misturar o melhor dos dois mundos. Ele permite escrever de uma forma que estamos acostumados, porém com a possibilidade de fazer tudo que o Sass faz. Uma exelente opção pra quem quer aprender o Sass é começar com o Scss.

Less

O Less foi criado por Alexis Sellier, em 2009. Alexis desenvolveu o Less como uma linguagem de estilo dinâmica para o JavaScript, que compila para CSS. Sua intenção era tornar a escrita e a manutenção de estilos CSS mais eficientes e flexíveis. Desde então, o Less ganhou popularidade e é amplamente utilizado na indústria do desenvolvimento web.

O Less possui uma sintaxe bem similar ao CSS tradicional. Porém, com ele, você tem todas as vantagens que citamos até então, como, por exemplo, mixins, funções e opção de declaração aninhada.

Aqui está um exemplo, de um estilo CSS padrão e o mesmo estilo com Less.

.container {
	background-color: brown;
	width: 100%;
}

.item {
	width: 100px;
	height: 100px;
	transition: .5s;
}

.item:hover {
	transform: scale(1.05);
}

.container {
	background-color: brown;
	width: 100%;
}

.item {
	width: 100px;
	height: 100px;
	transition: .5s;
	
	&:hover {
		transform: scale(1.05);
	}
}

Curso HTML5 + CSS3 - Propriedades e seletores avançados

Conhecer o curso

Stylus

O único da nossa lista de pré-processadores que tem grande diferença de sintaxe. O Stylus foi desenvolvido por TJ Holowaychuk em 2010. Ele é conhecido por sua sintaxe minimalista e flexível, que permite escrever estilos de forma concisa e legível.

Assim como, os anteriores que vimos aqui, o Stylus, também possui todos os recursos que vimos até então. Entretanto, sua sintaxe não se utiliza das {} chaves, : dois pontos ou ; ponto e virgula. É provavel, que, para iniciantes, possa ser um tanto confuso. Porém, para desenvolvedores mais experiêntes pode ajudar bastante.

Vamos ver o mesmo exemplo, porém, dessa vez com Stylus. Isso dará uma boa percepção da diferença entre os pré-processadores.

.container {
	background-color: brown;
	width: 100%;
}

.item {
	width: 100px;
	height: 100px;
	transition: .5s;
}

.item:hover {
	transform: scale(1.05);
}

.container
	background-color brown
	width 100%

.item
	width 100px
	height 100px
	transition .5s
	&:hover
		transform scale(1.05)

Como utilizar os pré-processadores CSS em meus projetos?

Precisamos ter em mente, que para usar os pré-processadores, que vimos até então, precisamos transformar esses arquivos em um arquivo CSS, que é entendido pelos navegadores.

Para isso, é necessário um compilador para transformar o código escrito nessas linguagens em CSS puro. O Sass possui diferentes opções de compiladores, cada um com suas características e recursos específicos. Como por exemplo, o Dart Sass e o LibSass.

O Less também possui uma variedade de compiladores disponíveis. Como, por exemplo, Less.js, Prepros, entre outros.

O Stylus tem seu próprio compilador chamado Stylus Compiler. É uma implementação em JavaScript que pode ser executada no navegador ou no Node.js. Você pode instalá-lo usando o gerenciador de pacotes npm.

Conclusão

Vale lembrar, que todos esses pré-processadores foram criados quando o CSS puro ainda era muito limitado. Hoje em dia, com várias atualizações, o CSS já faz muitas coisas que antes, só era possível com o uso desses pré-processadores. Entretanto, muitas empresas, ainda utilizam de algum pré-processador em seus projeto.

Em conclusão, os pré-processadores CSS, como Sass, Less e Stylus, são ferramentas poderosas que oferecem uma série de recursos avançados para a estilização páginas web. Além disso, os compiladores específicos para cada pré-processador garantem que o código seja transformado em CSS válido e compatível com os navegadores. No entanto, é importante ter em mente que o uso de pré-processadores CSS adiciona uma camada extra de complexidade e requer familiaridade com a sintaxe e os recursos oferecidos. Com o devido domínio dessas ferramentas, os desenvolvedores podem criar estilos mais eficientes, modulares e flexíveis, melhorando a produtividade e a qualidade dos projetos web.