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:

1
2
3
4
sass --version
 
# A resposta deverá ser:
Haml/Sass 3.0.25 (Classy Cassidy)

Chega de suspense!

O jeito mais fácil de começar com SASS é simplesmente mergulhando de cabeça, crie o arquivo teste.scss em qualquer pasta, abre o terminal e mande o SASS observar o arquivo:

1
sass --watch teste.scss:teste.css

Beleza, agora que o SASS está de olho, vamos modificar o arquivo teste.scss:

1
2
3
4
56
/* Teste SASS */
 
body {
  font-family: Arial, sans-serif;
  font-size: 16px;}

Repare que, ao salvar o arquivo, o SASS irá avisá-lo pelo terminal que fez modificações:

1
2
>>> Change detected to: teste.scss
  overwrite teste.css

Abra o arquivo teste.css e confira o resultado:

1
2
3
4
/* Teste SASS */
body {
  font-family: Arial, sans-serif;
  font-size: 16px; }

Formatação

Legal né? Bom, quase... as chaves na mesma linha ficam estranhas, nao acha? Isto na verdade é simplesmente uma configuração e é fácil de alterar:

1
2
3
# Aperte Ctrl + C para parar o SASS
# Agora reinicie-o, passando o parâmetro style adicional:
sass --watch teste.scss:teste.css --style expanded

Agora faça uma edição qualquer no arquivo teste.scss e verá que ele agora fecha as chaves em uma nova linha! Se consultarmos a documentação, veremos que existem algumas opções diferentes para o parâmetro style:

nested

É o formato padrão, fecha as chaves na mesma linha e tenta representar fielmente a estrutura dos estilos de um arquivo HTML.

expanded

Um formato mais comum e natural para quem está acostumado a trabalhar com CSS no dia-a-dia, fecha as chaves na linha seguinte e deixa tudo organizadinho.

compact

Formato compacto, tenta agrupar todos os estilos de cada seletor em uma só linha, é bom para economizar espaço mas fica um pouco mais difícil de compreendê-lo.

compressed

Formato comprimido (minificado), é ideal para produção pois ocupa o menor espaço de todos, mas fica quase indecifŕavel.

Qual formato quiser usar é escolha sua! Sugiro usar expanded para desenvolvimento, e compressed para produção.

Seletores embutidos

Bom, vamos ao que interessa! Uma coisa bacana do SASS são os seletores embutidos (nested), que permitem escrever seletores de vários níveis evitando repetição:

1
2
3
4
56
7
8
9
1011
12
13
14
1516
17
18
19
2021
/* arquivo .scss */
/* Exemplo tirado do site do SASS */
 
#menu {
  width: 80%;  height: 23px;
  
  /* repare que não fechei a chave do estilo #menu */
  
  ul {    list-style: none;
  }
  
  li {
    float: left;    
    a {
      font-weight: bold;
    }
  }}

Entenderam? Mais ou menos? Seguinte, vou mostrar o markup (HTML) em questão para facilitar a compreensão:

1
2
3
4
56
7
<!-- não tem segredo, é um menuzinho de navegação simples -->
<div id="menu">
  <ul>
    <li class="first"><a href="/">Home</a></li>
    <li><a href="/contato">Contato</a></li>  </ul>
</div>

O lance bacana é que não é necessário repetir os seletores pais para criar seletores mais "fundos". Ao colocar o estilo da ul dentro do seletor #menu, o SASS entende e expande o seletor automaticamente, e assim sucessivamente. Veja como ficaria o arquivo .scss acima, após ser convertido em CSS:

1
2
3
4
56
7
8
9
1011
12
13
14
1516
17
18
19
20
/* arquivo .css */
 
#menu {
  width: 80%;
  height: 23px;}
 
#menu ul {
  list-style: none;
} 
#menu li {
  float: left;
}
 /* repare que podemos embutir quantos níveis quisermos, pois o estilo do 'a' estava
dentro do estilo do 'li', que por sua vez estava dentro do estilo do #menu */
#menu li a {
  font-weight: bold;
}

Uma dica importante: é fácil cometer erros de síntaxe! Então sempre verifique a mensagem no terminal, pois caso ocorra um erro, o SASS avisará qual o erro e em qual linha ocorreu!

Referências aos seletores pais

Já vimos o quanto que os seletores embutidos facilitam a nossa vida na hora de escrever estilos longos, mas e para embutir estilos usando pseudo-seletores? (Caso não saiba, um "pseudo-seletor" é demarcado com dois pontos (:), por exemplo a:hover) A diferença é que não há espaços entre o seletor e o pseudo-seletor, portanto embutí-lo normalmente não funcionará (pode tentar!).

A solução é simples, usamos o operador '&':

1
2
3
4
56
7
8
9
1011
12
13
14
/* arquivo .scss */
 
a {
  color: #ff9900;
  text-decoration: none;  
  &:hover {
    text-decoration: underline;
  }
    &:visited {
    color: #000;
  }
}

O SASS entende que estamos nos referindo ao seletor pai e compila o código corretamente:

1
2
3
4
56
7
8
9
1011
12
/* arquivo .css */
 
a {
  color: #ff9900;
  text-decoration: none;}
a:hover {
  text-decoration: underline;
}
a:visited {  color: #000;
}

Variáveis

Sempre quis variáveis no CSS? Seu pedido foi atendido! Veja como é fácil declarar variáveis no SASS:

1
2
3
4
56
7
8
9
1011
12
13
14
15
/* arquivo .scss */
 
/* Variáveis são declaradas com o cifrão ($) */
$azul: #336699;
$preto: #000;$branco: #fff;
/* lembre-se de colocar um ponto-e-vírgula (;) no final de cada declaração */
 
body {
  font-family: Arial, sans-serif;  font-size: 16px;
  /* para usar uma variável, simplesmente coloque o seu nome com o cifrão antes */
  color: $branco;
  background-color: $azul;
}

Ao salvar o arquivo scss verá que o SASS avisou novamente que o arquivo css foi atualizado:

1
2
3
4
56
7
8
/* arquivo .css */
 
body {
  font-family: Arial, sans-serif;
  font-size: 16px;  color: white;
  background-color: #336699;
}

Facil, não é? Para quem conheçe PHP, verá que a síntaxe das variáveis é bem parecida.

Interpolação de variáveis

Interpolação? Resumindo, é um nome complicado para dizer que as variáveis não só podem ser usadas sozinhas, como também podem ser usadas para criar seletores e estilos dinâmicos. É só chamar a variável com #{$NOME_DA_VARIAVEL} para indicar que ela é uma variável interpolada:

1
2
3
4
56
7
8
9
1011
12
13
14
15
/* arquivo .scss */
 
$lado: left;
$preto: #000;
$tamanho: 1px solid $preto; 
/* para usar a variável "sozinha" não fazemos nada a mais */
.borda-direita {
  border-right: $tamanho;
} 
/* a interpolação pode ser usado tanto para estilos quanto para seletores! */
.border-#{$lado} {
  border-#{$lado}: $tamanho;
}

E veja como fica o CSS correspondente:

1
2
3
4
56
7
8
9
10
/* arquivo .css */
 
.borda-direita {
  border-right: 1px solid black;
} 
/* pode ser usado tanto para estilos, quanto para seletores! */
.border-left {
  border-left: 1px solid black;
}

Sei que o artigo já está ficando comprido, mas achei melhor colocar tudo de uma vez para não quebrá-lo mais ainda. Vamos em frente... falta pouco!

Mixins

Esta é, de longe, a funcionalidade mais poderosa do SASS. Um mixin é um bloco reutilizável de código que pode ser inserido facilmente em qualquer lugar. São declarados usando a keyword @mixin e utilizados utilizando a keyword @include. Atenção! Não confunda o "@include" do SASS com "include" normal do CSS!

Veja como funcionam os mixins:

1
2
3
4
56
7
8
9
1011
12
13
14
1516
17
/* arquivo .scss */
/* Exemplo tirado do site do SASS */
 
/* definição do mixin */
@mixin rounded-top {  $side: top;
  $radius: 10px;
 
  /* olha a interpolação aí! */
   border-#{$side}-radius: $radius;
  -moz-border-radius-#{$side}: $radius;
  -webkit-border-#{$side}-radius: $radius;
}
 /* chamada do mixin usando @include */
#menu li { @include rounded-top; }

E o CSS fica bacana:

1
2
3
4
56
7
/* arquivo .css */
 
#menu li {
  border-top-radius: 10px;
  -moz-border-radius-top: 10px;  -webkit-border-top-radius: 10px;
}

Já perceberam a grande sacada? Mixins são perfeitos para utilizar estilos de CSS3, pois como ainda não existe uma especificação oficial, cada fabricante implementa a sua própria variação e muitas vezes é necessário reescrever os estilos com todos os prefixos para funcionar (-moz, -webkit, -o). Já, usando mixins, os definimos uma vez e depois os chamamos facilmente usando @include! Vocês verão em mais detalhes no exemplo de funções.

Funções

E agora, a cereja no bolo: funções! Se achou que mixins são legais, mas pensou que seriam mais legais ainda se aceitassem parâmetros, não está sozinho. E, de fato, eles aceitam sim parâmetros! E, como é de se esperar, dá até para definir parâmetros opcionais com valores padrão:

1
2
3
4
56
7
8
9
1011
12
13
14
1516
17
18
19
/* arquivo .scss */
 
/* repare que o primeiro parâmetro tem um valor padrão de 10px e os demais
tem um valor padrão igual ao do primeiro parâmetro */
 @mixin border-radius($top: 10px, $right: $top, $bottom: $top, $left: $top) {
  -moz-border-radius: $top $right $bottom $left;
  -webkit-border-radius: $top $right $bottom $left;
  border-radius: $top $right $bottom $left;
} 
#footer {
  @include border-radius(1px, 2px, 3px, 4px);
}
 /* também podemos usá-lo sem passar nenhum parâmetro */
#menu li {
  @include border-radius();
}

O CSS fica exatamente conforme esperado:

1
2
3
4
56
7
8
9
1011
12
13
/* arquivo .css */
 
#footer {
  -moz-border-radius: 1px 2px 3px 4px;
  -webkit-border-radius: 1px 2px 3px 4px;  border-radius: 1px 2px 3px 4px;
}
 
#menu li {
  -moz-border-radius: 10px 10px 10px 10px;  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
}

O que é legal também é que o SASS tem um monte de funções embutidas que permitem, entre outras coisas, realizar operações matemáticas simples. Para ver todas as funções disponíveis é só acessar a documentação

Conclusão

Ufa! É isso aí, chegamos no final! Show de bola né?

Pois é, o SASS é muito útil e realmente torna o CSS mais divertido! E olha que ainda tem muito mais que dá para fazer, por exemplo utilizar estruturas de controle para criar estilos dinâmicos facilmente que mudam de layouts fixos para líquidos, e muito mais!

Espero que tenham curtido e, caso tenham interesse, me avisem (pelos comentários, twitter e facebook) e escreverei um artigo final sobre técnicas avançadas de SASS, demonstrando o seu verdadeiro poder!

[]s