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
$cor-primaria: #3bbfce;
$margem: 16px;
.content-navigation {
border-color: $cor-primaria;
color: darken($cor-primaria, 10%);
}
.border {
padding: $margem / 2;
margin: $margem / 2;
border-color: $cor-primaria;
}
Ou estilo SASS
$cor-primaria: #3bbfce $margem: 16px .content-navigation border-color: $cor-primaria color: darken($cor-primaria, 10%) .border padding: $margem/2 margin: $margem/2 border-color: $cor-primaria
Compilaria para:
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
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
table.hl
margin: 2em 0
td.ln
text-align: right
li
font:
family: serif
weight: bold
size: 1.3em
Ou no estilo SCSS
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.3em;
}
}
Compilaria para:
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}
li {
font-family: serif;
font-weight: bold;
font-size: 1.3em;
}
Aninhamentos mais complicados, incluindo aninhamento de espaço de nomes e referências aos ascendentes são discutidas na documentação do Sass.
@mixin table-base {
th {
text-align: center;
font-weight: bold;
}
td, th {
padding: 2px;
}
}
#data {
@include table-base;
}
Ou no estilo SASS
=table-base
th
text-align: center
font-weight: bold
td, th
padding: 2px
#data
+table-base
Compilaria para:
#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
}
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.
$numeroDeQuadrados: 3
@for $i from 1 through $numeroDeQuadrados
#quadrado-#{$i}
background-color: red
width: 50px * $i
height: 120px / $i
O exemplo acima compilaria para:
#quadrado-1 {
background-color: red;
width: 50px;
height: 120px;
}
#quadrado-2 {
background-color: red;
width: 100px;
height: 60px;
}
#quadrado-3 {
background-color: red;
width: 150px;
height: 40px;
}
Argumentos
Mixins também suportam argumentos.
=left($dist) float: left margin-left: $dist #data +left(10px)
Compilaria para:
#data {
float: left;
margin-left: 10px;
}
Em combinação
=table-base
th
text-align: center
font-weight: bold
td, th
padding: 2px
=left($dist)
float: left
margin-left: $dist
#data
+left(10px)
+table-base
Compilaria para:
#data {
float: left;
margin-left: 10px;
}
#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
}
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.
.erro border: 1px #f00 background: #fdd .erro.intrusao font-size: 1.3em font-weight: bold .erroRuim @extend .erro border-width: 3px
Compilaria para:
.erro, .erroRuim {
border: 1px #f00;
background: #fdd;
}
.erro.intrusao,
.erroRuim.intrusao {
font-size: 1.3em;
font-weight: bold;
}
.erroRuim {
border-width: 3px;
}Origem: Wikipédia, a enciclopédia livre.