|
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.[2][3] 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.[4] 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[5] (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.[6] 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.[7][8] Há também uma implementação em Java chamada JSass.[9] Além disso, Vaadin tem uma implementação em Java de Sass.[10] 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.[11] SassScript oferece os seguintes mecanismos: variáveis, aninhamento, mixins, e seletor de herança. VariáveisSass 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:
As variáveis podem ser parâmetros ou resultados de uma das várias funções disponíveis.[12] 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;
}
AninhamentoCSS 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.[4] 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.[11] @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;
}
LoopsSass 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;
}
ArgumentosMixins também suportam argumentos.[4] =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 seletoresEnquanto 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.[4] .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;
}
Sass suporta herança múltipla. Veja tambémReferências
|
||||||||||||||||||||||||
