Saltar para o conteúdo

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"