# Sass (linguagem de folhas de estilos)

Sass (em inglês, "syntactically awesome stylesheets", ou "folhas de estilo sintaticamente incríveis") é uma linguagem de folhas de estilo concebida inicialmente por Hampton Catlin e desenvolvida por Natalie Weizenbaum. Depois de suas versões iniciais, Weizenbaum e Chris Eppstein continuaram a estender Sass com SassScript, uma simples linguagem de script usada em arquivos Sass.
Sass é uma linguagem de script que é interpretada ou compilada em Cascading Style Sheets (CSS). SassScript é a linguagem em si. Sass consiste em duas sintaxes. A sintaxe original, chamada de "sintaxe indentada", usa uma sintaxe semelhante a Haml. Ela usa indentação para separar blocos de código e caracteres de nova linha para separar regras. A sintaxe mais recente, "SCSS", usa formatação de bloco, como a de CSS. Esta usa chaves para designar blocos de código e ponto-e-vírgula para separar linhas dentro de um bloco. Os arquivos com sintaxe de indentação e SCSS são tradicionalmente dados as extensões .sass e .scss, respectivamente.
CSS3 consiste em uma série de seletores e pseudo-seletores que agrupam regras que lhes são aplicáveis. Sass (no contexto maior de ambas as sintaxes) estende CSS fornecendo vários mecanismos disponíveis em linguagens de programação mais tradicionais, particularmente linguagens orientadas a objeto, mas que não estão disponíveis no CSS3 em si. Quando SassScript é interpretado, ele cria blocos de regras CSS para vários seletores, conforme definido pelo arquivo Sass. O intérprete Sass traduz SassScript em CSS. Alternativamente, Sass pode monitorar arquivos .sass ou .scss e traduzi-los para um arquivo .css sempre que os arquivos .sass ou .scss forem salvos. Sass é simplesmente açúcar sintático para CSS.
A implementação oficial da Sass é open-source e codificada em Ruby; no entanto, existem outras implementações, incluindo PHP, e uma implementação de alto-desempenho em C chamada libSass. Há também uma implementação em Java chamada JSass. Além disso, Vaadin tem uma implementação em Java de Sass. A sintaxe indentada é uma metalinguagem. SCSS é uma metalinguagem aninhada, pois CSS válido é SCSS válido com a mesma semântica. Sass suporta a integração com a extensão Firebug do Firefox.
SassScript oferece os seguintes mecanismos: variáveis, aninhamento, mixins, e seletor de herança.

## Variáveis

Sass permite que variáveis sejam definidas. Variáveis começam com um sinal de dólar ($). Atribuição de variáveis é feita com um dois-pontos (:).
SassScript suporta quatro tipos de dados:
* Números (incluindo unidades)
* Cadeias de caracteres (com aspas ou sem)
* Cores (nome ou nomes)
* Valores booleanos
As variáveis podem ser parâmetros ou resultados de uma das várias funções disponíveis. Durante a tradução, os valores das variáveis são inseridos no documento CSS resultante.
Na estilo SCSS
Ou estilo SASS
Compilaria para:

## Aninhamento

CSS oferece suporte lógico de aninhamento, mas os blocos de código em si não podem ser aninhados. Sass permite que blocos de código sejam inseridos um dentro do outro.
No estilo SASS
Ou no estilo SCSS
Compilaria para:
Aninhamentos mais complicados, incluindo aninhamento de espaço de nomes e referências aos ascendentes são discutidas na documentação do Sass.
Ou no estilo SASS
Compilaria para:

### Loops

Sass permite iterar sobre variáveis usando '@for', '@each' e '@while', que podem ser usado para aplicar estilos diferentes em elementos com classes ou ids semelhantes.
O exemplo acima compilaria para:

### Argumentos

Mixins também suportam argumentos.
Compilaria para:

### Em combinação

Compilaria para:

## Herança de seletores

Enquanto CSS3 suporta a hierarquia de Modelo de Objeto de Documentos (DOM), ele não permite que a herança de seletores. Em Sass, a herança é conseguida através da inserção de uma linha dentro de um bloco de código que usa a palavra-chave '@extend' e referencia outro seletor. Os atributos do seletor estendido são aplicados ao seletor que chama.
Compilaria para:
Sass suporta herança múltipla.

## Veja também

* LESS (linguagem de folha de estilos)