1001Ferramentas
🔄Conversores

Conversor SASS para CSS

Explica diferenças entre a sintaxe indentada do SASS (.sass) e o CSS, com exemplos comparativos.

Suporta regras planas (sem aninhamento).

SASS (.sass) usa indentação ao invés de chaves. Exemplo:

.box\n  color: red\n  padding: 8px

Equivalente em CSS:

.box {\n  color: red;\n  padding: 8px;\n}

Variáveis: $cor: red. Aninhamento e mixins seguem mesma lógica do SCSS.

Da indentação para chaves e ponto e vírgula

Alguém te mandou um trecho em .sass, aquele dialeto sem chaves e sem ponto e vírgula, e o seu projeto usa .scss ou CSS puro. A conversão é só reformatação, mas fazer à mão em trinta linhas rende exatamente o que você imagina: um ponto e vírgula faltando e uma chave sobrando, descobertos quando o build quebra. Cole o bloco indentado e pegue a versão com chaves do outro lado.

A leitura é por indentação. Linha que começa na coluna zero é tratada como seletor e abre um bloco; linha indentada é tratada como declaração e é partida no primeiro dois pontos, virando propriedade e valor com ponto e vírgula no fim. É reformatação de sintaxe, não compilação: nada é resolvido, nada é calculado. O aviso abaixo do campo diz o limite em voz alta, só regras planas, e vale levar a sério.

Aninhamento não funciona aqui. Uma linha indentada com o e comercial de referência ao pai é lida como se fosse declaração e sai deformada, e os filhos dela acabam misturados no bloco de cima. Variável com cifrão na coluna zero também é lida como seletor. Use em blocos planos, para leitura e conversão rápida. Se o arquivo tem aninhamento, mixin ou include, rode o compilador oficial do Sass. Há botão de copiar e tudo acontece no navegador.

Perguntas frequentes

Qual a diferença entre .sass e .scss?
São duas sintaxes para a mesma linguagem. O .scss usa chaves e ponto e vírgula, igual ao CSS; o .sass usa indentação e quebra de linha. Variáveis, aninhamento e mixins existem nos dois.
Ele resolve variáveis e mixins?
Não. Não há compilador na página. A saída tem a mesma estrutura da entrada, apenas escrita com chaves e ponto e vírgula.
E se o meu trecho tiver blocos aninhados?
Não converta aqui. Qualquer linha indentada é tratada como declaração, então seletores filhos saem quebrados. Use o compilador Sass no terminal para esse caso.

Ferramentas Relacionadas