Para quem tinha lido o último artigo e ficou curioso sobre como implementar o SASS, chegou a hora! E, para aqueles que não fazem a mínima idéia do que estou falando, leiam a introdução sobre SASS para despertar a curiosidade!

Preparação

Para o restante do artigo partirei do pressuposto que temos o SASS 3.0.25 ou mais recente instalado corretamente e acessível no terminal pelo comando sass:

Junto com o HTML, o CSS é a principal linguagem da web. E, como o HTML, apesar de ter evoluído bastante nos últimos anos, ainda é bastante limitada no que pode fazer e nem mesmo o CSS3 ajuda muito em algumas coisas.

Uma das principais reclamações é a falta de variáveis para, por exemplo, armazenar diferentes cores em uma paleta e criar blocos de estilos mais re-utilizáveis. Outra reclamação é que não dá para herdar estilos ou mesmo re-aproveitá-los como mixins ou algo parecido.

Você já brincou com CSS3 em algum projeto pessoal? Achou muito louco? Até colocou no seu site, mas todos os seus amigos com Internet Explorer não conseguiram ver nada? Ficou puto com a Microsoft? Chutou o cachorro do vizinho por causa disso?

(bom, quase todas essas coisas...)

E se eu te dissesse que estes tempos já acabaram e que o cachorro do vizinho não vai mais sair correndo quando te ver... acreditaria em mim?

Uma prática bem comum ao trabalhar com front-end é a de usar uma imagem em vez de um título ou botão e esconder o texto usando a propriedade text-indent.

Se você já teve que estilizar qualquer página usando CSS com certeza deparou-se com o problema de que as vezes o layout fica um pouco diferente dependendo do navegador do usuário. Se desenvolve usando Mac ou Linux também com certeza teve o mesmo problema, independente do navegador.