Sass: CSS Pré-processado na prática

Nos últimos anos, o CSS vem se tornando um recurso cada vez mais obrigatório na lista de tecnologias base de uma empresa, com requisitos e necessidades também cada vez mais complexas. Isso se deve em grande parte devido ao aumento de dispositivos com os mais variados tamanhos de tela (celulares, flobets, tablets, dentre muitas outras criações), o que exige um design mais arrojado dos websites. Além disso, o design também assume características imprescindíveis para os mesmos websites, principalmente os que alcançam demasiado sucesso, sem mencionar nos fatores de arquitetura da informação, recursos, SEO, revezamento de conhecimento e compartilhamento da grande quantidade de informação manipulada.

Quando se falava em CSS há algum tempo atrás, o termo simplicidade era de certa forma bem usado, dadas as restritas condições que os browsers e plataformas disponibilizavam, além de recursos simples e comuns. Agora o profissional front-end tem de lidar com folhas de estilo cada vez mais complexas e extensas, além do fato de algumas vezes ter de se aventurar no jQuery para conseguir aquele efeito ou aquela medida perfeita que o CSS não consegue fazer e, por sua vez, usando um pouco do processamento do browser do cliente. Em contrapartida, muitos dos célebres problemas de padronização de estilos e regras, muitos destes que incluíam o Internet Explorer em quaisquer das suas versões anteriores à versão 8, foram e estão sendo corrigidos com o passar do tempo.

É comum vermos, por exemplo, aquele problema típico do front-end de copiar e colar trechos de código e só alterar os seletores: o problema vem depois quando se tenta fazer manutenção em um e esquece de fazer naquela cópia que foi feita para aquela página que ninguém se lembra mais que existe.

Visando atingir todos esses cenários problemáticos e muitos outros que aqui ainda serão citados, é que foram criadas ferramentas de pré-processamento de CSS. Estas envolvem uma sintaxe bastante próxima à do CSS, porém com algumas alterações que muitos front-end sonharam, como o uso de variáveis, funções, importação de código, dentre várias outras.

Neste artigo vamos explorar ao máximo o uso do Sass (Syntactically Awesome StyleSheets), que resumidamente, se trata de um módulo desenvolvido em Ruby que faz a leitura de dois tipos de arquivos com extensão Sass ou SCSS. Estas extensões tratam de sintaxes do próprio SASS que vamos falar mais adiante, e fica à escolha do desenvolvedor qual das duas vai utilizar. Basicamente, o sistema faz uma tradução para um arquivo CSS com todas as regras interpretadas e atualizadas, porém aplicando todas as funcionalidades do SASS.

O SASS pode ser utilizado de três formas: utilização como módulo independente, como uma ferramenta de linha de comando ou como um plugin de framework Rack-enabled ou Ruby on Rails. Para este artigo vamos utilizá-lo diretamente no terminal de comandos.

Vale ressaltar que também existem outros sistemas similares, tal como o LESS e o Foundation. Para aprender o Sass (ou qualquer outra destas ferramentas) não é necessário nenhum conhecimento aprofundado de programação nem a instalação de várias ferramentas e ambientes. Para este artigo utilizaremos a versão mais atual até a redação deste artigo, a 3.3.14.

Instalação e Configuração

O Sass é uma ferramenta que necessita do ambiente Ruby para poder executar suas tarefas de leitura e interpretação do código. Caso prefira, existem aplicativos que constroem todo o ambiente para poder iniciar o uso do Sass, sendo alguns deles gratuitos (basta conferir a lista completa de opções disponíveis na seção Links), mas a instalação manual não é algo tão complicado e nem demanda muito tempo.

A instalação do Sass varia muito pouco conforme o sistema operacional: caso você esteja usando o Windows basta baixar o instalador do Ruby e realizar a instalação normalmente. No caso do Ubuntu, basta acessar o terminal e digitar o comando: