Falando de Front-end: SASS, por onde começar?

SASS, LESS ou Stylus são três nomes que muito provavelmente você já tenha ouvido falar. Principalmente em ambientes de trabalho que buscam maior produtividade no seu dia-a-dia.

Melhorias contínuas visando aumento de produtividade são buscadas pela maioria das empresas. Portanto, o front-end também deve caminhar na mesma trilha, evitando desperdícios.

Tanto o sass quanto o less e o stylus são pré-processadores de css. E como o próprio nome já diz, eles são responsáveis por compilar nosso css, baseando-se na sintaxe em questão. Com eles, os pré-processadores, é possível estender a linguagem css a fim de obter maiores poderes (variáveis, nesting, placeholders) na hora de desenvolver estilos.

Objetivo

Neste artigo manteremos o foco no sass e podemos deixar os “concorrentes” para um outro momento. Falaremos sobre suas dependências, instalação, algumas configurações e deixaremos o sass pronto para fazer, também, uma espécie de hello world.

Instalação do Sass

Para fazer a instalação do sass, precisamos antes instalar o Ruby na máquina. Para usuários de Linux é possível fazer isso usando seu gerenciador de pacotes. E para Windows há um Ruby Installer cujo processo de instalação é bem simples. Os usuários de Mac não precisam ter essa preocupação porque o Ruby já vem instalado. Para maiores detalhes na instalação do Ruby verifique a página oficial que documenta o processo em praticamente todos os sistemas operacionais.

O Ruby trabalha com gems que nada mais são que bibliotecas etiquetadas com um nome e uma versão. Entretanto não precisamos nos preocupar com isso por enquanto. Mas é interessante saber que o sass é uma RubyGem. Após ter certeza de que o Ruby está instalado corretamente, precisamos instalar a gem do sass. Para isso basta abrir o terminal e executar o seguinte comando:

$ gem install sass

Se você for usuário Linux ou Mac e não estiver logado como administrador, tente executar o comando com sudo:

$ sudo gem install sass

Para ter certeza de que a instalação ocorreu com perfeição, o seguinte comando deverá retornar a versão do sass:

$ sass -v

Feito isso, parabéns, o sass e suas possíveis dependências estarão instaladas e você está com os poderes de um pré-processador css em mãos. Vamos analisar alguns desses poderes disponíveis.

Variáveis

Assim como em linguagens de programação, uma variável é responsável por armazenar um determinado valor. Com as variáveis do sass podemos armazenar uma determinada cor, fonte, largura ou qualquer outro valor que você irá reutilizar em outro momento. Vamos criar uma variável que será a cor primária do projeto exemplo e vamos atribuir como cor de fundo da tag body:

$primary-color: #123123;

body {  
    font-family: arial;
    background-color: $primary-color;
}

Quando mandarmos o sass processar esse bloco de código, a variável de cor primária será substituída pelo seu valor, gerando o seguinte css:

body {  
    font-family: arial;
    background-color: #123123;
}

Nesting

Assim como o html nos permite ter uma hierarquia de elementos, com o sass é possível termos a mesma ideia. Isso vai melhorando a leitura na hora de desenvolver nossos estilos.

.menu {
    li {
        display: inline-block;
    }
}

Com isso temos o seguinte css:

.menu li {
    display: inline-block;
}

Salvando e Compilando

Para chegar nos resultados apresentados, precisamos salvar os arquivos com a extensão .scss e executar o seguinte comando no terminal:

sass sample.scss main.css  

Esse comando é responsável por gerar o css final, baseado no que escrevemos no .scss. Sempre que uma mudança precisar ser feita, devemos alterar o .scss a fim de não perder as mudanças em uma próxima compilação. Para evitar a compilação do css sempre que alguma mudança for feita, existe a possibilidade de compilar automaticamente, usando o seguinte comando:

sass --watch sample.scss main.css  

Com isso temos o nosso css final e devemos chamar ele no arquivo html. Para isso, inclua o seguinte código dentro da tag :

<link rel="stylesheet" type="text/css" href="main.css" />  

Existem maneiras mais elegantes de se trabalhar com sass, automatizando alguns processos, reaproveitando código de acordo com as nossas necessidades e organizando os arquivos de forma que a manutenção seja facilitada no futuro. Porém isso será assunto para os próximos capítulos. E por enquanto ficamos com essa base para saber por onde começar.