Primeiro de tudo, o que são pré-processadores?

São basicamente ferramentas alternativas para escrever CSS de uma forma mais dinâmica, organizada e flexível. Facilitando a vida do desenvolvedor.

Você escreverá seus estilos(CSS) na linguagem do pré-processador escolhido, que posteriormente será compilado para .css.

Cenário atual

Inicialmente o CSS foi projetado para ser uma linguagem simples para estilizar páginas web. Muitas vezes ela nos limita em algum aspecto, as tarefas do desenvolvedor front-end tem se tornado cada vez mais complexas, com uma infinidade de itens que precisam da nossa atenção, como por exemplo:

• Vendor prefixes, ex: -webkit-transform: rotateY(180deg);
• Desenvolvimento de aplicações responsivas;
• Dar manutenções a projetos de larga escala;
• Reutilização de código;
• etc…

Para suprir essa necessidade surgiu os pré-processadores.

Utilidades

Com os pré-processadores é possível declarar variáveis, fazer operações matemáticas, criar condições para os estilos, e muito mais…

Eles vão melhorar seu fluxo de trabalho e deixar seu projeto mais organizado. Vai ser divertido novamente escrever CSS :).

Aqui vou abordar especificamente o Sass com a sintaxe SCSS, atualmente o mais utilizado. Existem outros também basstante conhecidos como: Less, Stylus, Roole, e você decide qual deve usar.

Vamos ao código.

Variáveis

Com uma variável você poderá armazenar informações, podendo reutilizar seu código.

Para declarar uma váriavel é simples:

@cor-default: red; /* Less */
cor-default = red; /* Stylus */
$cor-default = red; /* Roole */

Como dito, nesse post utilizaremos Sass como exemplo. Abaixo declaro uma váriavel chamada $cor-default e atribuo a ela o valor #990000.

$cor-default: #990000; /* Sass */

header,
footer {
  background: @cor-default;
}

/* Será compilado para */

header,
footer {
  background: #990000;
}

Utilização e tipos:

$font-size: 14px;
$padding: 30px;
$font-family: Arial, tahoma, sans-serif;
$img-path: "../img/";

Operações:

$font-size: 12px;
$font-big: $font-size + 6px; /* 18px */
$img-path: "../img/";
$cor-default: #333;

body {
  font-size: $font-size;
  background: url(+ $img-path + "bg-body.jpg") repeat center top;
}

a {
  color: $cor-default;
  font-size: $font-big;
  
  &:hover {
    color: $cor-default * 3; /* #999 */
  }
}

/* Será compilado para */

body {
  font-size: 12px;
  background: url(../img/bg-body.jpg") repeat center top;
}

a {
  color: #333;
  font-size: 18px;
}

a:hover {
  color: #999;
}

Mais operações:

$total: 960px;
$respiro: 35px;
$espacamento: 20px;

.container {
  padding: $respiro;
  width: $total;
}

.col {
  width: ($total - $respiro * 2 - $espacamento) / 2; /* 435px */
}

/* Será compilado para */

.container {
  padding: 35px;
  width: 960px;
}

.col {
  width: 435px;
}

Mixins:

Acabamos de ver que ter váriaveis e executar operações matemáticas nos ajuda muito, mas queremos ainda mais poder, e podemos ter isso com os mixins, eles nos ajudarão principalmente no problema com os vendor-prefixes.

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

div {
  height: 50px;
  width: 50px;
  @include border-radius(4px); /* Utilizando o mixin */
}

/* Será compilado para */

div {
  height: 50px;
  width: 50px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}

Esse é um exemplo basico de mixin, você pode usar mixin para qualquer necessidade, é costume ter em todo o projeto um arquivo de mixins para uso. Por exemplo, pode criar um arquivo chamado mixins.scss e criar mixin chamado size que recebe 2 parâmetros, width e height, como abaixo.

Arquivo de mixins:

/* mixins.scss */

@mixin size($width, $height) {
  width: $width;
  height: $height;
}

// (muitos outros mixins)...

Utilizando nos arquivos do projeto:

@import '_meu-arquivo-de-mixins';

div {
  @include size(50px, 75px);
}

/* Será compilado para */

div {
  width: 50px;
  height: 75px;
}

Herança:

header {
  height: 30px;
  background: red;

  h1 {
    padding: 10px;

    a {
      color: blue;
    }
  }

  span {
    font-size: 14px;
  }
}

/* Será compilado para */

header {
  height: 30px;
  background: red;
}

header h1 {
  padding: 10px;
}

header h1 a {
  color: blue;
}

header span {
  font-size: 14px;
}

Pseudo-elementos:

Dentro das regras de herança (nested selectors), & sempre reprensentará o seletor pai.

a {
  color: red;

  &:hover {
    text-decoration: underline;
  }

  &:active {
    color: blue;
  }

  &::after {
    content: '>';
  }

  .home & {
    color: black;
  }
}

/* Será compilado para */

a {color: red;}
a:hover {text-decoration: underline;}
a:active {color: blue;}
a::after {content: '>';}
.home a {color: black;}

Comentários:

O Sass aceita comentários padrão de CSS de várias linhas com /* */, bem como comentários de uma linha com //. Os comentários de várias linhas serão preservados no arquivo compilado, enquanto os comentários de uma linha são removidos. Por exemplo:

/* Esse é um comentário
* de várias linhas.
* Utilizando a sintaxe padrão do CSS,
* esse comentário vai aparecer no arquivo compilado.
*/
body { color: black; }

// Esse é um comentário de uma linha
// ele não vai aparecer no arquivo compilado
// sempre que você usar comentários com essa sintaxe.
a { color: green; }

Será compilado para

/* Esse é um comentário
* de várias linhas.
* Utilizando a sintaxe padrão do CSS,
* esse comentário vai aparecer no arquivo compilado.
*/
body { color: black; }

a { color: green; }

Condicionais e funções:

O Sass é o que possui um grande número de funcionalidades, aqui estão algumas delas, cada uma com diversas possibilidades de uso.

@if
@else if
@else
@for
@while
@each
@function
@mixin
@extend
@debug

Gostei! Como eu uso?

Para utilizar o Sass e outros pré-processadores você vai precisar de alguma maneira compilar seus códigos para .css e para isso existem algumas ferramentas:

• Sass com Prepos
• Sass com Codekit
• Sass com Grunt
• Sass com Gulp
• Ruby Command Line

Cada pré-processador também fornece informações de como compilar em seus respectivos sites.

Espero que façam bom uso dos pré-processadores, entenda que cada um possui suas características, mas estar utilizando qualquer um desses já é um grande passo.

E você? Ainda não utiliza pré-processadores?