Sass (linguagem de folhas de estilos)
Sass | |
---|---|
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 |
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
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.[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
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
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.[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 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.[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
Referências
- ↑ «Latest releases». SASS. Consultado em 7 de dezembro de 2019
- ↑ «Sass: Syntactically Awesome Style Sheets». sass-lang.com. Consultado em 3 de setembro de 2017. Arquivado do original em 1 de setembro de 2013
- ↑ «Natalie Weizenbaum's blog». Consultado em 3 de setembro de 2017. Arquivado do original em 11 de outubro de 2007
- ↑ a b c d «Sass - Syntactically Awesome Stylesheets»
- ↑ «Getting started with sass development». wisdomgeek
- ↑ Sass - Syntactically Awesome Stylesheets Tutorial
- ↑ «Sass / Scss»
- ↑ «Hampton's 6 Rules of Mobile Design»
- ↑ «jsass - A Java implementation of the Sass compiler (and some other goodies). - Google Project Hosting»
- ↑ «SassCompiler (Vaadin 7.0.7 API)»
- ↑ a b Sass (Syntactically Awesome StyleSheets) SASS_REFERENCE
- ↑ Module: Sass::Script::Functions Sass Functions
- Portal da tecnologia
- Portal do software livre
- Portal das tecnologias de informação