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:

sudo apt-get install ruby.

Ou caso a sua distribuição Linux seja derivada do RedHat, é necessário digitar o comando:

sudo yum install ruby.

Já nos sistemas Mac, o Ruby já vem pré-instalado, então a partir daí basta acessar o terminal e executar o seguinte:

gem install Sass

Com isso, o ambiente já está preparado para as implementações que faremos neste artigo. Para conferir se tudo está correto, digite o comando de verificação da versão do Sass:

Sass –v

Sintaxes

O Sass tem duas sintaxes diferentes de escrita: a própria sintaxe Sass e a sintaxe SCSS. A diferença entre elas é bem sutil e está presente em apenas alguns detalhes. Vejamos um exemplo da sintaxe SCSS representado pela Listagem 1.

body{
     margin:0;
     padding:0;
     text-align:center;
 }

O SCSS lembra muito o CSS tradicional que utilizamos, difere apenas em alguns aspectos e, em alguns casos, para quem está habituado com JavaScript e afins, lembra a estruturação padrão do JSON. Veja na Listagem 2 um exemplo de uso dessa sintaxe.

body
    margin: 0
    padding: 0
    text-align: center

Mas a sintaxe do Sass é mais sucinta e direta, inclusive na chamada de funções. Entretanto, tenha cuidado, pois esta sintaxe leva em consideração a indentação do código e inclusive o espaço que separa o atributo do valor. Na documentação oficial do Sass (ver seção Links) todos os exemplos são disponibilizados nas duas sintaxes, mas para fins didáticos, neste artigo utilizaremos apenas o padrão SCSS para deixarmos bem claro o que estamos fazendo e não nos perdemos em algum erro de indentação ou algum espaço que fique faltando.

Mãos à obra

Primeiramente vamos criar um diretório em um local de sua escolha e criar também um arquivo HTML com um conteúdo que atenda a todos os testes que serão feitos. Veja na Listagem 3 o código que deve ser adicionado ao mesmo arquivo.

<!DOCTYPE html>
  <html>
       <head>
            <link rel="stylesheet" type="text/css" href="style.css">
            <meta charset="utf-8">
            <title>DevMedia - Apredendo Sass</title>
       </head>
       <body>
            <header>
                  <h1>DevMedia</h1>
                  <nav>
                       <ul>
                            <li><a href='#'>Home</a></li>
                            <li><a href='#'>Camisetas</a></li>
                            <li><a href='#'>Acessórios</a></li>
                            <li><a href='#'>Contato</a></li>
                       </ul>
                  </nav>
                  <form id="search">
                       <input type="text" placeholder="Insira termo da busca aqui" />
                       <input type="submit" value="Buscar" />
                  </form>
            </header>
            <section id="content">
                  <p>Seja bem-vindo ao nosso site que utilizaremos como exemplo para 
                  estudos de SASS, espero que o conteúdo fique bastante extenso para podermos 
                  utilizar como exemplo as alturas de linha e dê uma impressão 
                  boa de um parágrafo se porta com os exemplos CSS que vamos utilizar e 
                  também usar como exemplo alguns <a href='#'>links</a> no meio 
                  do texto e até alguns <a href='#'>links mais extensos</a></p>
   
                  <p id='content-advise'>Não se esqueça de conferir nossas 
                  camisetas,canecas e outros badulaques…</p>
   
                  <h2>Notícias</h2>
                  <div class="products">
                       <div class="box size-1">
                            <h3>Notícia principal</h3>
                            <img src='http://dummyimage.com/100x100' />
                            <p>Breve descrição da notícia…</p>
                            <a href='#'>Saiba mais</a>
                       </div>
                       <div class="box size-2">
                            <h3>Notícia secundária</h3>
                            <img src='http://dummyimage.com/100x100' />
                            <p>Breve descrição da notícia…</p>
                            <a href='#'>Saiba mais</a>
                       </div>
                       <div class="box size-2">
                            <h3>Notícia secundária</h3>
                            <img src='http://dummyimage.com/100x100' />
                            <p>Breve descrição da notícia…</p>
                            <a href='#'>Saiba mais</a>
                       </div>
                  </div>
                  <h2>Produtos</h2>
                  <div class="products">
                       <div class="box size-3">
                            <h3>Camiseta DevMedia</h3>
                            <img src='http://dummyimage.com/100x100' />
                            <p>R$40,00</p>
                            <a href='btn comprar'>Comprar!</a>
                       </div>
                       <div class="box size-3">
                            <h3>Caneca DevMedia</h3>
                            <img src='http://dummyimage.com/100x100' />
                            <p>R$10,00</p>
                            <a href='btn comprar'>Comprar!</a>
                       </div>
                       <div class="box size-3">
                            <h3>Chaveiro DevMedia</h3>
                            <img src='http://dummyimage.com/100x100' />
                            <p>R$5,00</p>
                            <a href='btn comprar'>Comprar!</a>
                       </div>
                  </div>
            </section>
            <aside id="sidebar"></aside>
            <footer>Site desenvolvido apenas para estudos relacionados a SASS</footer>
       </body>
  </html>"