Hail!

Cá estou novamente para apresentar um tema nem tão recente a vocês.

Se você é desenvolvedor front-end e já participou de agum projeto de médio ou grande porte deve saber que dar manutenção em códigos CSS é difícil. Muitas vezes você se vê copiando, colando e/ou repetindo dezenas de regras, isto obviamente vai na contra-mão da produtividade e dos princípios de Lean Code.

Certo, mas como diabos fugir disso nessa linguagem ingrata que é o CSS? E a resposta é pré-processadores de CSS!
Além do Sass temos o Less, porém o objetivo deste não é compará-los e sim mostrar um pouco de como funciona o Sass.

Vamos lá!

Sass

O que é?

Sass é uma extensão do CSS que adicionar poder e elegância a linguagem básica. Ele permite que você use variáveis, aninhamentos, heranças, importações em linha, e mais, tudo com uma síntaxe completamente compatível com CSS. Sass ajuda a manter grandes arquivos CSS bem organizados […]

Olhando para esta definição já fica óbvio o porque da popularização do Sass.
Utilizar variáveis dentro do CSS é algo realmente magnífico. Imagine-se trocando manualmente o esquema de cores de um projeto, isso poderia ser feito alterando apenas o valor de algumas variáveis se estiver utilizando Sass.

Instalando

Para começar a utilizar Sass é muito simples, ainda mais simples se você estiver utilizando um Mac, já que para rodar o Sass precisamos ter o Ruby instalado na máquina (nativo no Mac 😌).
Partirei do pressuposto que você já o possui.

Tendo Ruby instalado basta digitar no seu terminal o seguinte: $ sudo gem install sass que o Ruby cuidará de toda a instalação desta gem para você.

Uma vez instalado você poderá acessá-lo através do seu terminal (ou prompt no Windows).
Para testar a instalação digite sass -v no terminal, deve ter uma saída parecida com a seguine: Sass 3.4.1 (Selective Steve)
Caso você não obtenha o resultado acima sugiro que siga o tutorial de instalação no site oficial.

Usando

Vamos à pratica: crie um arquivo style.scss no diretório do seu projeto.
Nele vamos definir uma regra para determinado parágrafo em determinada div, então, insira o seguinte código no arquivo:

$gray: #383838;

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;
}

div.div-teste {
    height: 100px;
    width: 100px;
    border: 1px black solid;
    @include border-radius(3px);
    p {
        color: $gray;
    }	
}

div.div-dois {
    border: 1px black solid;
    @include border-radius(3px);
}

Neste exemplo estamos usando pelo menos três vantagens que o Sass nos dá sobre o CSS puro:

  • Variáveis
  • Mixins
  • Aninhamento

Executando o comando $ sass style.scss style.css no terminal o Sass fará o processamento do arquivo gerando o arquivo style.css como saída.

Dica 1: Utilizando o comando: $ sass --watch style.scss:style.css fará com que o Sass fique observando o arquivo de origem (style.scss) e cada vez que você salvar uma alteração processará este arquivo gerando o arquivo de saída automaticamente.
Dica 2: As versões mais recentes das IDEs mais populares do mercado já vêem com a possibilidade de configurar seu projeto para processar automaticamente seus arquivos Sass.

Neste arquivo de saída deve conter o seguinte:

div.div-teste {
    height: 100px;
    width: 100px;
    border: 1px black solid;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px; 
}

div.div-teste p {
    color: #383838; 
}

div.div-dois {
    border: 1px black solid;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px; 
}

Não assim organizado, mas basicamente isto.

Como podemos observar, tivemos de digitar o código refente a regra da “borda” somente uma vez, depois de definida esta regra não será necessário replicar este bloco, basta utilizar comando @include nome_da_regra(parametros) que fará a inserção deste bloco no seletor que quisermos.

Além disso vimos o exemplo de uso de variáveis para definir a cor do texto, por exemplo. Poderíamos usar variáveis para definir o tamanho da borda, qual fonte usar, altura e largura das divs, etc.

Sass nos permite ainda utilizar IFs, FORs, EACHs, WHILEs e FUNCTIONs. Para aprender a utilizar estas diretivas recomendo a leitura da documentação oficial.

Concluindo

A questão levantada é: vale a pena aprender a utilizar o Sass?
A resposta é simples e clara: sim.

Porém há algumas divergências quanto a resposta para a questão de quando utilizar, particularmente penso que a curva de aprendizado desta ferramenta é simples para desenvolvedores de todos os níveis, a sintaxe é praticamente idêntica ao CSS e sempre, indiferente do tamanho, auxiliará no desenvolvimento do seu projeto.

Dica 3: Podemos ainda minificar nosso CSS de saída utilizando o comando $ sass -–style compressed style.scss style.css ou se você quiser usar o –watch $ sass --style compressed --watch style.scss:style.css.


Giorgio Fellipe

comments powered by Disqus