Sass (linguagem de folhas de estilos)

Origem: Wikipédia, a enciclopédia livre.
Sass
Sass (linguagem de folhas de estilos)
Surgido em 28 de novembro de 2006 (17 anos)
Última versão 3.7.4 (3 de abril de 2019; há 5 anos[1])
Criado por Hampton Catlin, Natalie Weizenbaum, Chris Eppstein
Estilo de tipagem Dinâmica
Influenciada por CSS, YAML, Haml
Influenciou LESS, Stylus, Tritium
Plataforma Multiplataforma
Licença: MIT License
Extensão do arquivo: .sass, .scss
Página oficial sass-lang.com

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áveis[editar | editar código-fonte]

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:

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;
}

Aninhamento[editar | editar código-fonte]

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.[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;
}

Loops[editar | editar código-fonte]

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[editar | editar código-fonte]

Mixins 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[editar | editar código-fonte]

=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[editar | editar código-fonte]

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.[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ém[editar | editar código-fonte]

Referências[editar | editar código-fonte]

  1. ↑ «Latest releases». SASS. Consultado em 7 de dezembro de 2019 
  2. ↑ «Sass: Syntactically Awesome Style Sheets». sass-lang.com. Consultado em 3 de setembro de 2017. Arquivado do original em 1 de setembro de 2013 
  3. ↑ «Natalie Weizenbaum's blog». Consultado em 3 de setembro de 2017. Arquivado do original em 11 de outubro de 2007 
  4. ↑ a b c d «Sass - Syntactically Awesome Stylesheets» 
  5. ↑ «Getting started with sass development». wisdomgeek 
  6. ↑ Sass - Syntactically Awesome Stylesheets Tutorial
  7. ↑ «Sass / Scss» 
  8. ↑ «Hampton's 6 Rules of Mobile Design» 
  9. ↑ «jsass - A Java implementation of the Sass compiler (and some other goodies). - Google Project Hosting» 
  10. ↑ «SassCompiler (Vaadin 7.0.7 API)» 
  11. ↑ a b Sass (Syntactically Awesome StyleSheets) SASS_REFERENCE
  12. ↑ Module: Sass::Script::Functions Sass Functions
Obtida de "https://pt.wikipedia.org/w/index.php?title=Sass_(linguagem_de_folhas_de_estilos)&oldid=58054312"