O que é SASS? Se você já tem algum conhecimento em web design provavelmente já ouviu sobre essa tecnologia, mas pode não conhecer a fundo sobre o que é exatamente o SASS é, o que faz e as maneiras como você deveria ou não utilizá-lo.

O SASS é uma linguagem de extensão do CSS, a sigla significa “Syntactically Awesome Style Sheets” traduzindo ao pé da letra, folhas de estilo com uma sintaxe incrível. A sua ideia é adicionar recursos especiais como variáveis, mixins, funções e operações e outras opções variadas que iremos comentar. O SASS tem como objetivo tornar o processo de desenvolvimento mais simples e eficiente, agora, veremos alguns exemplos da versatilidade dessa tecnologia.

Sintaxe!

SASS possui duas opções de sintaxe, sendo elas:

• SCSS: Utiliza a extensão .scss, é totalmente compatível com a sintaxe padrão CSS. É obrigatório o uso de chaves e ponto e vírgula após cada instrução. No exemplo abaixo estamos criando um mixin básico, podemos notar a similaridade com o CSS padrão, utilizando símbolos como o arroba, dolar, chaves e ponto e vírgula.

• Indentada(SASS): Utiliza a extensão .sass, sem as chaves padrão do CSS, todo código gerado em SASS deve ser transformado em CSS, pois navegadores não leem arquivos .sass. No exemplo abaixo, notamos as diferenças do CSS padrão, com o uso de símbolos e uma sintaxe incompatível, sem as clássicas chaves e ponto e vírgula.

Por que utilizar SASS?

O SASS foi criado visando facilitar a criação de códigos CSS, por isso, nos traz várias vantagens que o CSS não possui. Algumas delas são:

• Variáveis

Podemos declarar uma variável utilizando o operador $, então passamos a propriedade, podendo ela ser uma cor, fonte, tamanho da fonte, largura ou altura, etc.

• Nested Selectors

Em uma situação em que gostaríamos de acessar uma lista dentro de uma navbar. Seguindo a sintaxe padrão do CSS, iríamos utilizar o seguinte comando “navbar ul”. Agora, com o SASS, podemos apenas incluir a lista dentro da própria classe da navbar, facilitando o acesso, visualização e organização do código, que dessa maneira, flui de uma forma mais eficiente. Segue o exemplo abaixo:

– Utilizando Mixins (funções)

Funções são uma excelente maneira de otimizar o código, impedir repetições e facilitar alterações. Pode parecer um tanto complexo, utilizar funções com CSS, porém a prática é bem simples.

Por exemplo, nós precisamos criar um texto de alerta, com a cor vermelha, em negrito e tamanho maior. Ao invés de chamarmos essas propriedades cada vez que fosse necessário, podemos criar o mixin “texto-aviso”, incluindo-o dentro da nossa classe perigo, dessa forma, as propriedades incluídas nessa função serão passadas para essa classe.

• Conclusão:

O SASS nos fornece novas funcionalidades que agregam, facilitam e simplificam o processo de desenvolvimento. Para aqueles que estudam web design, o SASS acaba sendo uma ótima ferramenta, pois além dos recursos, possui uma sintaxe fácil de compreender. Agora você já pode utilizá-lo em seus projetos, espero que tenham gostado.

– Leonardo Michelotti