How-to: Conhecendo o SASS

Que tal discutirmos sobre o poder do pré-processador SASS, construindo um framework CSS do zero?

Por BRUNO CARVALHO

 

Você já teve que alterar a cor de algum texto ou tamanho de algum elemento e teve que dar o famoso “replace” pelos seus diversos arquivos CSS? Ou já utilizou o mesmo trecho de código para estilizar vários elementos? Essas e muitas outras tarefas rotineiras fazem parte do dia-dia do desenvolvedor front-end, mas você sabia que existem ferramentas que nos auxiliam a ser mais produtivos e que deixam essas tarefas menos chatas?

 

Nesta série de posts, será abordado sobre o pré-processador de CSS chamado Sass. Mas antes de iniciarmos com a parte divertida, precisamos saber o que é Sass, seu ecossistema e qual problema essa tecnologia busca resolver. O único requisito para acompanhar nosso post é saber CSS. Fácil né?

 

O QUE É SASS?

Sass é uma linguagem de estilo escrita em Ruby que extende do CSS e após compilada, gera o CSS na forma que já estamos acostumados. É uma das várias opções de pré-processadores (mais detalhes por vir) disponíveis para os desenvolvedores, sendo a mais usada no ano de 2017.

 

Ao utilizar Sass, nós diminuímos a monotonia e repetição ao escrever CSS. Não precisamos nos preocupar em decorar cores do site ou ficar repetindo trechos de códigos.

 

sass

 

O QUE É PRÉ-PROCESSADOR?

Basicamente, um pré-processador é um programa que possui uma entrada de textos, efetuando conversões baseadas em uma sintaxe. Essa sintaxe é processada gerando outra sintaxe.

 

Os pré-processadores mais populares para CSS são Sass, PostCSS, Less e Stylus, mas eles – pré-processadores – não são de uso exclusivo para CSS. Existem pré-processadores para HTML e Javascript também, como HAML, Markdown, Slim e CoffeeScript.

 

Afinal, qual é a vantagem em utilizar um pré-processador CSS?

Podemos criar variáveis, estilos condicionais, repetição (loops), imports de outros arquivos de estilo, funções, mixins e extends (que possibilitam extender propriedades). Com isso, damos super poderes para nosso velho CSS!

 

Além dos benefícios que citamos, os pré-processadores ajudam na manutenção do código, deixa o mesmo mais limpo e é imprescindível na aplicação de técnicas de Arquitetura CSS e DRY (Don’t repeat yourself).

 

Agora você sabe o que é um pré-processador CSS e para que serve o Sass. Nos próximos posts, você irá aprender como instalar o Sass e também entenderá as principais características desse pré-processador tão utilizado ao redor do mundo. Fique ligado!

Por BRUNO CARVALHO

Menino do computador desde os 12 anos, graduado e pós-graduado em Gestão de TI, hoje é Analista de Sistemas na Matera e focado no mundo do Frontend.

Postado em: 07 de maio de 2018

Confira outros artigos do nosso blog

Como customizar o response da API Rest do WordPress com informações específicas?

23 de julho de 2018

Marcelo Marcelino do Nascimento

A importância de uma boa documentação em projetos de sucesso

06 de julho de 2018

Marcelo Marcelino do Nascimento

Variáveis nativas no CSS: elas existem?

14 de maio de 2018

Patrícia Gomes dos Santos Silva

REST não é JSON

21 de agosto de 2017

Bruno Sofiato

Deixe seu comentário