Quando pensamos em produtividade, logo nos perguntamos e pesquisamos como aumentá-la sem grandes impactos. Então, os pré-processadores e frameworks para CSS vem suprir essa necessidade. Com vocês, um pouco de Sass.

Se você é um desenvolvedor front-end que está atualmente no mercado, já ouviu/leu palavrinhas como LESS, Foundation e Sass. Alguns sabem do que estamos falando, outros não, mas o fato que é que esses nomes foram dados à pré-processadores e frameworks de folhas de estilo para auxiliar na produtividade de códigos, principalmente no que diz respeito a repetição de uma mesma ação, diversas vezes.

Quantas vezes você se pegou copiando e colando aquele monte de classes identadas com mais de 15 linhas repetidamente e pensou: podia existir uma maneira mais rápida de fazer isso.

Agora eu te digo: tem!

O Sass é uma linguagem baseada em CSS (opa, aí já facilita, não é mesmo?) que depois de compilada gera o bom e velho CSS.

Possui duas sintaxes diferentes, o SASS e o SCSS.
Essa última é a que acho mais bacana pela semelhança com CSS normal, a outra é atrelada a indentação.

Duas coisas bacanas que o Sass possui, que você pode ir testando no SassMeister:

 
Variáveis
Sabe quando você repete a mesma cor no seu CSS umas 500 vezes, aí depois precisa mudar, aí tem que ficar procurando ou dar um Replace? Seria bom se o CSS tivesse como criar variável, atualmente não é possível, mas no Sass é!

Código em Scss:

// Crio a variável
$cor-padrao: #069;
 
.btn-primario {
  // aqui eu chamo a variável:
  background: $cor-padrao;
}
 
.texto-principal {
  // chamo aqui também:
  color: $cor-padrao;
}

Código compilado, já em CSS:

.btn-primario {
  background: #069;
}
 
.texto-principal {
  color: #069;
}

E para quem reparou, sim, no Sass dá para você comentar com //, mas esse comentário não vai para o CSS final.

 
Reutilizando código com Mixins
Tem aquele trecho de código que é repetido no CSS inteiro, aí se você precisar colocar uma declaração a mais, teria que alterar em vários lugares.

/* CSS normal */
.desfoque {
  -webkit-filter: blur(20px);
  filter: blur(20px);
}

No Sass você pode reutilizar esse código em vários lugares criando um mixin:

// Scss
 
// Crio um mixin com o '@' e dou um nome para ele :
@mixin desfoque {
  -webkit-filter: blur(20px);
  filter: blur(20px);
}
 
// Agora para incluir :
.painel img {
  @include desfoque;
  max-width: 100%;
}
O CSS compilado fica:

.painel img {
  -webkit-filter: blur(20px);
  filter: blur(20px);
  max-width: 100%;
}

Agora algumas perguntas e respostas:

Bacana, mas há outros pré-processadores além do Sass?

Sim! Os mais conhecidos além do Sass são o LESS e o Stylus. Temos até esse artigo aqui onde o Sérgio Lopes comenta sobre o LESS.

Mas qual é o melhor?

Essa pergunta é meio polêmica. Conheço só o Sass e o LESS, mas prefiro o primeiro por achar que é um pouco mais “certinho”. Por exemplo, enquanto no Sass para criar um mixin você usa o @mixin e o inclui dando um @include, no LESS você cria uma classe CSS comum e chama ela lá meio da sua regra CSS.

Preciso aprender todos?

Diria que se você aprende um, você automaticamente sabe 80% de todos. Então, não. Segura na mão de um deles e segue a vida. Mas acho válido ao menos conhecer os outros.

Outros recursos do Sass?

Há muitos recursos interessantes que o Sass possui como:

Funções de cor;
Extend;
Aninhamento de seletores CSS;
Operações matemáticas;
Etc.
Existe até um framework chamado Compass, que ficou bem conhecido por criar sprites CSS de forma automática, é realmente mágico quando você usa isso na primeira vez.