Sass (linguagem de folha de estilo)

Sass

Projetado por	Hampton Catlin
Desenvolvedor	Natalie Weizenbaum, Chris Eppstein
Apareceu pela primeira vez	28 de novembro de 2006 ; 16 anos atrás ( 2006-11-28 )
Versão estável	1.54.0 [1] / 7 de julho de 2022 ; 10 meses atrás [1] ( 07/07/2022 )
Disciplina de digitação	Dinâmico
SO	Plataforma cruzada
Licença	Licença MIT
Extensões de nome de arquivo	.sass, .scss
Local na rede Internet	sass-lang.com
Principais implementações
Dardo
Influenciado por
CSS (ambos "recuados" e SCSS) YAML e Haml (sintaxe recuada) Menos (SCSS)
Influenciado
Menos , Stylus , Trítio , Bootstrap (v4+)

Sass (abreviação de folhas de estilo sintaticamente impressionantes ) é uma linguagem de script de pré-processador que é interpretada ou compilada em Cascading Style Sheets (CSS). SassScript é a própria linguagem de script.

Sass consiste em duas sintaxes . A sintaxe original, chamada de "sintaxe recuada", usa uma sintaxe semelhante a Haml . ^[2] Ele usa recuo para separar blocos de código e caracteres de nova linha para separar regras. A sintaxe mais recente, SCSS (Sassy CSS), usa formatação de bloco como a do CSS. Ele usa chaves para denotar blocos de código e ponto e vírgula para separar as regras dentro de um bloco. A sintaxe recuada e os arquivos SCSS recebem tradicionalmente as extensões .sass e .scss, respectivamente.

CSS3 consiste em uma série de seletores e pseudo-seletores que agrupam regras que se aplicam a eles. Sass (no contexto mais amplo de ambas as sintaxes) estende o CSS fornecendo vários mecanismos disponíveis em linguagens de programação mais tradicionais , particularmente linguagens orientadas a objetos , mas que não estão disponíveis para o próprio CSS3. Quando o SassScript é interpretado, ele cria blocos de regras CSS para vários seletores conforme definido pelo arquivo Sass. O interpretador Sass traduz SassScript em CSS. Como alternativa, o Sass pode monitorar o arquivo .sass ou .scss e convertê-lo em um arquivo .css de saída sempre que o arquivo .sass ou .scss for salvo. ^[3]

A sintaxe recuada é uma metalinguagem. SCSS é uma metalinguagem aninhada e um superconjunto de CSS, já que CSS válido é SCSS válido com a mesma semântica .

O SassScript fornece os seguintes mecanismos: variáveis , aninhamento , mixins e herança de seletor . ^[2]

História

Sass foi inicialmente projetado por Hampton Catlin e desenvolvido por Natalie Weizenbaum. ^{[4] [5]} Depois de suas versões iniciais, Weizenbaum e Chris Eppstein continuaram a estender Sass com SassScript, uma linguagem de script usada em arquivos Sass.

Principais implementações

O SassScript foi implementado em vários idiomas, as implementações dignas de nota são:

• A implementação oficial do Dart de código aberto . ^[6]
• O módulo de nó "sass" oficial no npm , que é Dart Sass compilado para JavaScript puro. ^[7]
• O módulo de nó "sass-embedded" oficial, que é um wrapper JavaScript em torno do executável Dart nativo. ^[8]
• A implementação original do Ruby de código aberto criada em 2006, ^[6] foi obsoleta devido à falta de mantenedores e atingiu o fim da vida útil em março de 2019. ^{[9] [10]}
• libSass, a implementação C++ oficial de código aberto , foi preterida em outubro de 2020. ^[11]
• O módulo de nó obsoleto "node-sass" no npm , baseado no obsoleto libSass. ^[12]
• JSass, uma implementação Java não oficial, ^[13] baseada no obsoleto libSass. ^[14]
• phamlp, uma implementação Sass/SCSS não oficial em PHP . ^[6]
• Vaadin tem uma implementação Java do Sass. ^[15]
• Firebug , uma extensão do Firefox XUL ("legado") para desenvolvimento web. ^[16] Desde então, foi obsoleto em favor de ferramentas de desenvolvedor integradas ao próprio Firefox. Parou de funcionar desde que o Firefox 57 abandonou o suporte para extensões XUL.

Características

Variáveis

Sass permite que variáveis ​​sejam definidas. As variáveis ​​começam com um cifrão ( $). A atribuição de variável é feita com dois pontos ( :). ^[16]

SassScript suporta quatro tipos de dados: ^[16]

• Números (incluindo unidades)
• Strings (com aspas ou sem)
• Cores (nome ou nomes)
• Booleanos

As variáveis ​​podem ser argumentos ou resultados de uma das várias funções disponíveis . ^[17] Durante a tradução, os valores das variáveis ​​são inseridos no documento CSS de saída. ^[2]

$cor primária : #3bbfce ; $margem : 16 px ; 
 

.navegação de conteúdo { cor da borda : $ cor primária ; cor : escurecer ( $ cor primária , 10 % ); } 
   
    


.border { padding : $ margem / 2 ; margem : $ margem / 2 ; border-color : $ cor primária ; } 
     
     
   

$cor primária : #3bbfce $margem : 16 px 
 

.content-navigation 
border-color : $ cor primária : escurecer ( $cor primária , 10 % )   
    

.border 
padding : $margin / 2 margin : $margin / 2 border-color : $primary-color   
    
   

: root { 
--cor primária : #3bbfce ; --cor secundária : #2b9eab ; --margem : 8 px ; }    
    
    



. navegação de conteúdo { border-color : var ( --secundary-color ) color : var ( --secundary-color ); } 
   
   


. borda { preenchimento : 8 px ; margem : var ( --margin ); cor da borda : #3bbfce ; } 
   
   
   

Aninhamento

CSS suporta aninhamento lógico, mas os próprios blocos de código não são aninhados. Sass permite que o código aninhado seja inserido um dentro do outro. ^[2]

tabela .hl { margem : 2em 0 ; td .ln { text-align : right ; } } 
    
   
     
  


li { fonte : { família : serifa ; peso : negrito ; tamanho : 1,3 em ; } } 
   
     
     
     
  

tabela .hl margem : 2 em 0 td .ln text-align : right li fonte : família : serif peso : negrito tamanho : 1 .3 em 
    
   
     
  
 
   
     
     
     

mesa . hl { margem : 2 em 0 ; } tabela . hl td . ln { alinhamento de texto : à direita ; } 
    

  
   


li { font-family : serif ; peso da fonte : negrito ; tamanho da fonte : 1,3 em ; } 
   
   
   

Tipos mais complicados de aninhamento, incluindo aninhamento de namespace e referências aos pais, são discutidos na documentação do Sass. ^[16]

@mixin table-base { th { text-align : center ; peso da fonte : negrito ; } td , th { preenchimento : 2px ; } } 
   
     
     
  
    
     
  


#data { @include table-base ; } 
  

=table-base 
th text-align : center font-weight : negrito td , th padding : 2 px  
     
     
   
     

#data 
+table-base  

# data th { text-align : center ; peso da fonte : negrito ; } # data td , # data th { padding : 2 px ; }  
   
   

    
   

rotações

Sass permite iterar sobre variáveis ​​usando @for, @eache @while, que podem ser usados ​​para aplicar estilos diferentes a elementos com classes ou ids semelhantes.

$squareCount : 4 @for $i de 1 a $squareCount #square- #{ $i } cor de fundo : vermelho largura : 50 px * $i altura : 120 px / $i 
      
   
    
      
      

# quadrado-1 { cor de fundo : vermelho ; largura : 50 px ; altura : 120 px ; } 
   
   
   


# quadrado-2 { cor de fundo : vermelho ; largura : 100 px ; altura : 60px ; _ } 
   
   
   


# quadrado-3 { cor de fundo : vermelho ; largura : 150 px ; altura : 40px ; _ } 
   
   
   

argumentos

Mixins também suportam argumentos . ^[2]

=esquerda ( $dist ) float : margem esquerda -esquerda : $dist 
   
   

#data +esquerda ( 10 px ) 
  

# dados { float : esquerda ; margem esquerda : 10 px ; } 
   
   

Em combinação

=table-base 
th text-align : center font-weight : negrito td , th padding : 2 px  
     
     
    
     

=esquerda ( $dist ) float : margem esquerda -esquerda : $dist 
   
   

#data +left ( 10 px ) +table-base 
  
  

# dados { float : esquerda ; margem esquerda : 10 px ; } # data th { text-align : center ; peso da fonte : negrito ; } # data td , # data th { padding : 2 px ; } 
   
   

  
   
   

    
   

Herança do seletor

Embora o CSS3 suporte a hierarquia do Document Object Model (DOM), ele não permite a herança do seletor. No Sass, a herança é obtida inserindo uma linha dentro de um bloco de código que usa a palavra-chave @extend e faz referência a outro seletor. Os atributos do seletor estendido são aplicados ao seletor de chamada. ^[2]

.error 
border : 1 px #f00 background : #fdd    
   

.error.intrusion tamanho da fonte : 1 .3 em peso da fonte : negrito 
   
   

.badError @extend .error largura da borda : 3 px 
   
   

. erro , . badError { borda : 1 px #f00 ; plano de fundo : #fdd ; }  
    
   


. erro . intrusão , 
. badError . intrusão { tamanho da fonte : 1,3 em ; peso da fonte : negrito ; } 
   
   


. badError { largura da borda : 3 px ; } 
   

Sass suporta herança múltipla . ^[16]

libSass

Na Conferência de Desenvolvedores HTML5 de 2012, Hampton Catlin, o criador do Sass, anunciou a versão 1.0 do libSass, uma implementação C++ de código aberto do Sass desenvolvida por Catlin, Aaron Leung e a equipe de engenharia da Moovweb . ^{[18] [19]} O atual mantenedor do Sass, Chris Eppstein, expressou a intenção de contribuir também. ^[20]

De acordo com Catlin, libSass pode ser "colocado em qualquer coisa e terá Sass nele... certifique-se de que isso seria possível." ^[21]

Os objetivos de design do libSass são:

• Desempenho – Os desenvolvedores relataram aumentos de velocidade de 10x em relação à implementação Ruby do Sass. ^[22]
• Integração mais fácil – libSass facilita a integração do Sass em mais softwares. Antes do libSass, a integração estreita do Sass em uma linguagem ou produto de software exigia o empacotamento de todo o interpretador Ruby. Por outro lado, libSass é uma biblioteca estaticamente vinculável com zero dependências externas e interface semelhante a C, facilitando o empacotamento do Sass diretamente em outras linguagens e ferramentas de programação. Por exemplo, ligações libSass de software livre agora existem para Node , Go e Ruby . ^[19]
• Compatibilidade – o objetivo do libSass é a compatibilidade total com a implementação Ruby oficial do Sass. Este objetivo foi alcançado no libsass 3.3. ^[23]

integração IDE

Veja também

• Menos (linguagem de folha de estilo)
• Stylus (linguagem de folha de estilo)

Referências

links externos

• Website oficial